web-dev-qa-db-fra.com

changer <audio> src avec javascript

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

* MISE À JOUR: Apporté quelques modifications et maintenant son affirmation que audio.load(); n'est pas une fonction. Quelqu'un peut-il me dire pourquoi? Le code est mis à jour pour refléter les changements.

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 souhaiterai lire un fichier audio différent lorsque vous cliquerez dessus.

javascripthtml5html5-audio
39
Jmh2013

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>

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

73
Vitim.us

Essaye ça:

Remplacer:

audio.load();

avec:

audio.play();
3
Derek 朕會功夫

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();
2
Giampiero Poggi

Voici comment je l'ai fait en utilisant React et CJSX (Coffee JSX) basé sur la solution Vitim.us. En utilisant componentWillReceiveProps j'ai pu détecter chaque puis je vérifie si l'URL a changé entre les futurs accessoires et l'actuel. 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 redessin de force ne fonctionnait pas.

2
Vadorequest

Si vous stockez des métadonnées dans une balise, 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();
1
Musa

change ça

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

à

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