Changez <audio> src avec javascript

J'ai plusieurs fichiers audio que je souhaite diffuser en fonction de l'utilisateur sélectionne. Comment je fais ça? C'est ce que j'ai jusqu'ici et cela ne semble pas fonctionner.

* MISE À JOUR: audio.load(); quelques modifications et maintenant il prétend que audio.load(); N'est pas une fonction. Quelqu'un peut-il me dire pourquoi? Le code est mis à jour pour tenir compte des modifications.

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 et Item3 Je voudrai lire un fichier audio différent quand on clique dessus.

Essayez cet extrait

 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> 

Essaye ça:

Remplacer:

 audio.load(); 

avec:

 audio.play(); 

Si vous stockez des métadonnées dans une étiquette, utilisez des attributs de données, par exemple.

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

Utilisez maintenant l'attribut pour obtenir le nom de la chanson

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

Voici comment je l'ai fait en utilisant React et CJSX (Coffee JSX) en fonction de la solution Vitim.us . En utilisant componentWillReceiveProps j'ai pu détecter toutes les modifications de propriété. Ensuite, je vérifie si l'url a changé entre les accessoires futurs et ceux actuels. Et voilà.

 @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() 

Je devais le faire de cette façon, car même un changement d'état ou un redressement de la force ne fonctionnait pas.

change ça

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

à

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

Avec 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(); 
  var fileUrl = 'http://' + window.location.hostname +"abcd.ogg"; document.getElementById('audiotag').src = fileUrl;