更改 src和javascript

一尘不染

更改 src和javascript

html

我有多个音频文件，要根据用户选择流式传输。我怎么做？到目前为止，这是我所拥有的，而且似乎没有用。

*更新：进行了一些更改，现在声称它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="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当Item3我单击它们时，我将要播放其他音频文件。

阅读 230

2020-05-10

共1个答案

一尘不染

试试这个片段

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>

2020-05-10