当我从 <a> 标签单击歌曲时，如何让 mp3 播放器播放歌曲？

Question

我在<a> 标签中列出了歌曲列表，并且我希望 mp3 播放器对每首歌曲都是通用的，所以当我单击列表中的一首歌曲（链接）时将在播放器上播放，并且不必刷新页面或在另一个选项卡中打开它来播放歌曲？

这是我的 HTML：

<audio preload="auto" src="#"></audio>

<a class="trigger" href="#" data-src="audio/song1.mp3">Song #1</a>
<a class="trigger" href="#" data-src="audio/song2.mp3">Song #2</a>
<a class="trigger" href="#" data-src="audio/song3.mp3">Song #3</a>
<a class="trigger" href="#" data-src="audio/song4.mp3">Song #4</a>

Answer 1

由于您使用 jQuery 标记了问题，您可以简单地使用它来设置 audio 元素的 src 属性。像这样的：

$('a').on('click', function () {
    $('audio').prop('src', $(this).data('src'));
});