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

Posted 2023-02-25

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

【英文标题】：How to make a mp3 player play songs when i click on them from my <a> tag?

【发布时间】：2016-06-18 19:46:03

【问题描述】：

我在<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>

【参考方案1】：

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

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