更改<音频> src与JavaScript [英] change <audio> src with javascript

问题描述

我有多个音频文件，我想根据用户选择进行流式传输。我怎么做？这是我迄今为止所做的，似乎并不奏效。
$ b

* UPDATE：做了一些修改，现在宣称 audio.load（）; 不是函数。谁能告诉我为什么？该守则已更新以反映更改。

JavaScript：

  function updateSource（）{
 var audio = document.getElementById（'oggSource'）; 
 audio.src = 
'audio / ogg /'+ 
 document.getElementById（'song1'）。getAttribute（'data-value'）; 
 audio.load（）; 
} 
  

HTML：

 < audio id =audiocontrols =controls> 
< source id =oggSourcesrc =type =audio / ogg>< / source> 
< source id =mp3Sourcetype =audio / mp3>< / source> 
您的浏览器不支持音频格式。 
< / audio> 
 
< ul style =list-style：none> 
< li> 2012年5月27日星期日
< ul style =display：none> 
< li id =song1data-value =song1.ogg> 
< button onclick =updateSource（）;> Item1< / button> 
< / li> 
< li> Item2< / li> 
< li> Item3< / li> 
< / ul> 
< / li> 
< / ul> 
  

Item2 和 Item3 我会在点击时播放不同的音频文件。 试试这个snippet

e.preventDefault（））{code> 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（）; //调用此方法只是预加载音频而不播放audio.play（）; //调用这个来播放歌曲};

< ul style =list-style：none> < li>音讯档案< ul id =list> <李>< A HREF = ＃ 的数据值= http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga > Death_Becomes_Fur.oga< / A>< /立GT; <李>< A HREF = ＃ 的数据值= http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4 > Death_Becomes_Fur.mp4< / A>< /立GT; < 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 =audiocontrols =controls> < source id =audioSourcesrc =>< / source> < / audio>

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

I have multiple audio files that I want to stream based on the user selects. How do I do that? This is what I have so far and it doesn't seem to work.

*UPDATE: Made a few changes and now its claiming that audio.load(); is not a function. Can anyone tell me why that is? The Code is updated to reflect the changes.

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 and Item3 I will want to play a different audio file when they are clicked on.

解决方案

Try this snippet

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/

这篇关于更改<音频> src与JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！