Wie ändere ich Audio-Tags, wenn ich auf Radio-Button klicke?

-4

Wenn ich einen HTML-Radio-Button überprüfe, möchte ich den Wert meines HTML5-Audio-Tags ändern.Wie ändere ich Audio-Tags, wenn ich auf Radio-Button klicke?

Hier ist mein Audio-tag:

<audio controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test1.wav" type="audio/wav"> 
</audio>

Zum Beispiel: Wenn ich auf Radio-Button ‚genannt klicken test2.wav Ich mag würde meinen Audio-Tag wie folgt ändern:

<audio controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test2.wav" type="audio/wav"> 
</audio>

Wie kann ich das machen?

Vielen Dank im Voraus,

Quelle

2016-05-31 Julien

Google ‚addEventListener“ – Jacob

Da die OP nicht wirklich viel Mühe in der Frage (beide in Tags gesetzt haben und in der Frage selbst, dass ** nicht viel Aufwand zeigt), bringe ich auch nicht viel Aufwand: https://jsfiddle.net/eq4dL1rg/ das kann ein Start sein g Punkt, nicht sicher, ob es funktioniert, nicht sicher, ob es sein sollte, obwohl es sollte. Bitte geben Sie beim nächsten Mal mehr Code an, was haben Sie versucht, das Problem zu lösen? Hast du plötzlich nach dem Schreiben des Audio-Tags aufgehört? Kein JavaScript (oder jQuery, wie die Tags vorschlagen) ist in Ihrer Frage verfügbar, und Sie haben nicht einmal die Radio-Buttons zur Verfügung gestellt. – briosheje

Aktualisiert:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Events</title> 
</head> 
<body> 

<input type="radio" value="test2" name="rad" onclick="boom(this.value);">test2 
<input type="radio" value="test3" name="rad" onclick="boom(this.value);">test3 
<input type="radio" value="test4" name="rad" onclick="boom(this.value);">test4 
<br> 
    <audio id="audio" controls> 
    <source src="" type="audio/ogg"> 
    <source src="" type="audio/mpeg"> 
    <source src="test1.wav" type="audio/wav" id="sound"> 
</audio> 
<script type="text/javascript"> 
    function boom(val){ 
    var audio = document.getElementById("audio"); 
     var aud = document.getElementById("sound"); 
     aud.src=val+".wav"; 
     audio.load(); 
    } 
</script> 
</body> 
</html>

https://jsfiddle.net/g1jssesz/2/

Quelle

2016-05-31 17:55:35 bhansa

Danke. Aber ich habe deinen Code ausprobiert, es funktioniert nicht. Nur die erste Datei wird abgespielt (test1.wav). Wenn ich auf einen anderen Button klicke, wird 'test2.wav' oder 'test3.wav' nicht abgespielt. Irgendwelche Ideen ? Dateien sind auf dem Server ... – Julien

möglicherweise geben Sie nicht den richtigen Pfad zu der Datei. pre-pend den übergeordneten Pfad auch vor dem Dateinamen. – bhansa

Ich habe diesen Fehler mit Ihrem Code: 'Uncaught TypeError: document.getElementByTag ist keine Funktion' – Julien

Zuerst eine ID zum source Tag hinzuzufügen.

<source src="test1.wav" type="audio/wav" id="foo">

Als nächstes verwendet ein bisschen JavaScript, und fügen Sie Ihr Optionsfeld ein onclick Attribut.

<input type="radio" name="foo" value="test2.wav" onclick="document.getElementById('foo').src=this.value">

Quelle

2016-05-31 17:42:55 RamenChef

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
</head> 
<body> 
    <audio controls> 
    <source src="" type="audio/ogg"> 
     <source src="" type="audio/mpeg"> 
     <source src="test1.wav" type="audio/wav"> 
     </audio> 
     <br> 
     <input type="radio" name="track" value="test1.waw" checked> test1.waw<br> 
     <input type="radio" name="track" value="test2.waw"> test2.waw<br> 
     <input type="radio" name="track" value="test3.waw"> test3.waw 
     <script type="text/javascript"> 
     $("input[type=radio][name=track]").on('change', function(){ 
      $("audio source").attr("src", $(this).val()); 
      console.log("new source is: " + $("audio source").attr("src")); 
      alert("new source is: " + $("audio source").attr("src")); 
     }); 
     </script> 

     </body> 
     </html>

Quelle

2016-05-31 17:50:46

Wie ändere ich Audio-Tags, wenn ich auf Radio-Button klicke?

Antwort

Verwandte Themen