web-dev-qa-db-de.com

Ändern Sie <audio> src mit Javascript

Ich habe mehrere Audiodateien, die ich basierend auf der Auswahl des Benutzers streamen möchte. Wie mache ich das? Dies ist, was ich bisher habe und es scheint nicht zu funktionieren.

* UPDATE: Einige Änderungen vorgenommen und behauptet nun, dass audio.load(); keine Funktion ist. Kann mir jemand sagen warum das so ist? Der Code wird 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 möchte eine andere Audiodatei abspielen, wenn sie angeklickt wird.

39
Jmh2013

Probieren Sie dieses Snippet aus

list.onclick = function(e) {
  e.preventDefault();

  var Elm = e.target;
  var audio = document.getElementById('audio');

  var source = document.getElementById('audioSource');
  source.src = Elm.getAttribute('data-value');

  audio.load(); //call this to just preload the audio without playing
  audio.play(); //call this to play the song right away
};
<ul style="list-style: none">
  <li>Audio Files
    <ul id="list">
      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">Death_Becomes_Fur.oga</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4">Death_Becomes_Fur.mp4</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/11/rrs006.oga">rrs006.oga</a></li>
      <li><a href="#" data-value="http://media.w3.org/2010/05/sound/sound_90.mp3">sound_90.mp3</a></li>
    </ul>
  </li>
</ul>

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

JSFiddle http://jsfiddle.net/jm6ky/2/

73
Vitim.us

Versuche dies:

Ersetzen:

audio.load();

mit:

audio.play();
3

mit jQuery:

 $("#playerSource").attr("src", "new_src");

    var audio = $("#player");      

    audio[0].pause();
    audio[0].load();//suspends and restores all audio element

    if (isAutoplay) 
        audio[0].play();
2
Giampiero Poggi

Hier ist, wie ich es mit React und CJSX (Coffee JSX) basierend auf Vitim.us Lösung gemacht habe. Mit componentWillReceiveProps konnte ich jeden erkennen Dann überprüfe ich, ob sich die URL zwischen den zukünftigen und den aktuellen Requisiten geändert hat.

@propTypes =
    element: React.PropTypes.shape({
         version: React.PropTypes.number
         params:
             React.PropTypes.shape(
                 url: React.PropTypes.string.isRequired
                 filename: React.PropTypes.string.isRequired
                 title: React.PropTypes.string.isRequired
                 ext: React.PropTypes.string.isRequired
             ).isRequired
     }).isRequired

componentWillReceiveProps: (nextProps) ->
    element = ReactDOM.findDOMNode(this)
    audio = element.querySelector('audio')
    source = audio.querySelector('source')

    # When the url changes, we refresh the component manually so it reloads the loaded file
    if nextProps.element.params?.filename? and
    nextProps.element.params.url isnt @props.element.params.url
        source.src = nextProps.element.params.url
        audio.load()

Ich musste es so machen, weil selbst ein Zustandswechsel oder ein Force-Redraw nicht funktionierte.

2
Vadorequest

Wenn Sie Metadaten in einem Tag speichern, verwenden Sie Datenattribute, z.

<li id="song1" data-value="song1.ogg"><button onclick="updateSource()">Item1</button></li>

Verwenden Sie nun das Attribut, um den Namen des Songs zu erhalten

var audio = document.getElementById('audio');
audio.src='audio/ogg/' + document.getElementById('song1').getAttribute('data-value');
audio.load();
1
Musa

ändere das

audio.src='audio/ogg/' + document.getElementById(song1.ogg);

zu

audio.src='audio/ogg/' + document.getElementById('song1');
0
Satya