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

Question

我在我的 <a> 标签中制作了一个歌曲列表，我希望 mp3 播放器对每首歌曲都是通用的，所以当我 单击 一首歌曲时(link) 在播放器上播放列表中的歌曲，并且不需要刷新页面或在另一个选项卡中打开它来播放歌曲？

这是我的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'));
});