音乐播放直接用audio标签就行了,需要注意由于浏览器问题,无法使用自动播放,需要用户手动点击过才能播放
简单示例如下,自己整个音乐列表,添加点击事件设置audio的src实现播放
<!doctype html>
<meta charset="utf-8" />
<style>
#music{display:flex;max-width:640px;margin:0 auto}
#music .list{width:200px}
#music .list a{display:block;line-height:25px}
#music .list a.active{background:blue;color:#fff}
#music audio{flex:1}
</style>
<div id="music">
<div class="list">
<a class="active" href="https://www.w3dev.cn/eg/showbo/Music/兽族.MP3">兽族.MP3</a>
<a href="https://www.w3dev.cn/eg/showbo/Music/人类.MP3">人类.MP3</a>
<a href="https://www.w3dev.cn/eg/showbo/Music/不死族.MP3">不死族.MP3</a>
<a href="https://www.w3dev.cn/eg/showbo/Music/暗夜精灵.MP3">暗夜精灵.MP3</a>
</div>
<audio src="https://www.w3dev.cn/eg/showbo/Music/兽族.MP3" controls></audio>
</div>
<script>
var music = document.querySelector('#music'), alist = music.querySelectorAll('.list a'), audio = music.querySelector('audio');
audio.oncanplay = function () {
audio.play();
}
for (var a of alist) {
a.onclick = function () {
if (this.className =='active') return false;
for (var a of alist) a.className='';
this.className = 'active';
audio.src = this.href;
return false;//阻止跳转
};
}
</script>