javascript - 单击选项中的选项时，如何更改音频源？

Question

我有一组声音，我将其归因于空音频
看起来像这样:

                <audio id = "audio4" controls>

                    <source id = "audioSourceAside" type="audio/mpeg">  

                </audio> 

我向我要使用的每个选项中添加了一个“更改”事件监听器，但是它无法正常工作，音频源保持灰色，即使我通过chrome的控制台强制它获取源，它也是灰色的。

Answer 1

使用附加到change元素的<select>事件。在change处理程序内，在.pause()节点上调用<audio>，将.src元素的<source>设置为.value元素的<select>，调用.load()，然后在.play()上调用AudioNode。

var select = document.querySelector("select");
var audio = document.querySelector("audio");
var source = audio.querySelector("source");
select.onchange = function() {
  audio.pause();
  source.src = this.value;
  audio.load();
  audio.play();
}

<select>
  <option>Select audio to play</option>
  <option value="https://ia600305.us.archive.org/30/items/return_201605/return.mp3">RETURN by smiling cynic </option>
  <option value="https://upload.wikimedia.org/wikipedia/commons/b/be/Hidden_Tribe_-_Didgeridoo_1_Live.ogg">Didgeridoo 1 Live by Hidden Tribe</option>
</select>
<br>
<audio id="audio4" controls>
<source id="audioSourceAside">
</audio>