ändere & lt; audio & gt; src mit Javascript
Habe ich mehrere audio-Dateien, die ich streamen will auf der Grundlage der Benutzer auswählt. Wie mache ich das? Dies ist, was ich habe, so weit-und es scheint nicht zu funktionieren.
*UPDATE: ein paar änderungen Vorgenommen und jetzt ist es zu fordern, dass audio.load();
ist nicht eine Funktion. Kann mir jemand sagen warum dass so ist? Der Code ist aktualisiert, um die änderungen widerzuspiegeln.
JavaScript:
function updateSource(){
var audio = document.getElementById('oggSource');
audio.src =
'audio/ogg/' +
document.getElementById('song1').getAttribute('data-value');
audio.load();
}
HTML:
<audio id="audio" controls="controls">
<source id="oggSource" src="" type="audio/ogg"></source>
<source id="mp3Source" type="audio/mp3"></source>
Your browser does not support the audio format.
</audio>
<ul style="list-style: none">
<li>Sunday May 27, 2012
<ul style="display: none">
<li id="song1" data-value="song1.ogg">
<button onclick="updateSource();">Item1</button>
</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
</ul>
Item2
und Item3
ich werde spielen wollen, eine andere audio-Datei, wenn Sie angeklickt werden.
InformationsquelleAutor der Frage Jmh2013 | 2012-05-29
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen Sie dies:
Ersetzen:
mit:
InformationsquelleAutor der Antwort Derek 朕會功夫
Hier ist, wie ich es Tat mit Reagieren und CJSX (Kaffee JSX), basierend auf witim.uns Lösung.
Mit
componentWillReceiveProps
ich war in der Lage zu erkennen, jede änderung der Eigenschaft. Dann muss ich nur prüfen, ob die url hat sich geändert zwischen der zukünftigen Requisiten und dem aktuellen. Und voilà.Ich hatte, es zu tun auf diese Weise, weil auch eine änderung des Zustands oder eine force redraw hat nicht funktioniert.
InformationsquelleAutor der Antwort Vadorequest
Wenn Sie die Speicherung von Metadaten in einer tag-Daten verwenden Attribute wie zB.
Nun das Attribut verwendet, um den Namen des Songs
InformationsquelleAutor der Antwort Musa
ändern Sie diese
zu
InformationsquelleAutor der Antwort Satya
mit jQuery:
InformationsquelleAutor der Antwort Giampiero Poggi
InformationsquelleAutor der Antwort Arif Rathod