更改 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 并使用它来访问它并在点击处理程序中设置 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>

更改 html5 音频播放器的歌曲

Changing the song of the html5 audio player

html

javascript

audio

html5-audio