javascript - 更改html5音频播放器的歌曲

Question

我想使用javascript来更改src，如下所示:

<script>
function myFunctionP1() {
    mysong = "http://www.afinerweb.com/music/bensound-slowmotion.1.mp3";
}
function myFunctionP2() {
    mysong = "http://www.afinerweb.com/music/bensound-slowmotion.2.mp3";
}
</script>

并具有一些控制音乐选择的按钮，如下所示:

<button type="button" onclick="myFunctionP1()">set player to Song1</button>
<button type="button" onclick="myFunctionP2()">set player to Song2</button>

但这似乎不起作用。有人可以指出正确的解决方案吗？

Answer 1

您需要更改音频的src属性，因此您可以为音频元素分配一个ID，并使用该ID来访问它，并在点击处理程序中设置src值

function myFunctionP1() {
  document.getElementById('mysong').src = "http://www.afinerweb.com/music/bensound-slowmotion.1.mp3";
}

function myFunctionP2() {
  document.getElementById('mysong').src = "http://www.afinerweb.com/music/bensound-slowmotion.2.mp3";
}

<audio id="mysong" src=mysong controls preload="metadata">
  <p>Your browser doesn't support html5 audio.</p>
</audio>
<button type="button" onclick="myFunctionP1()">set player to Song1</button>
<button type="button" onclick="myFunctionP2()">set player to Song2</button>