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>
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;