<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
body{
margin: 0;
padding:0;
}
.boxlist{
margin: 0 auto;
width: 100vm;
height: 100vh;
}
button{
width: 100%;
height: 25%;
margin: 0 auto;
font-size:0.9rem;
background: #669ae3;
color:#fff;
}
.clicked{
background-color: #c5aa4e;
color: #520126;
}
</style>
</head>
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100* (clientWidth / 1080) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<body>
<div class="boxlist">
<button onclick="music(1)" id="btn1">章贡谣</button>
<button onclick="music(2)" id="btn2">最美的相遇</button>
<button onclick="music(3)" id="btn3">大美宋城看章贡</button>
<button onclick="music(4)" id="btn4">等你来</button>
</div>
<script type="text/javascript">
var audio;
function music(i){
if(audio){
audio.pause(); // 切换的时候先暂停其他的
}
audio = i+".mp3";
audio = new Audio(audio);
// // 循环播放，播放结束继续播放
$(audio).unbind("ended").bind("ended", function(){
audio.play();
})
$("#btn"+i).addClass("clicked").siblings().removeClass("clicked");
audio.play();
}
</script>
</body>
</html>
从实现这个功能的同时，了解到html5对audio和video的autoplay不在支持，如果调用play()会报如下错
Uncaught（in promise）DOMException
监听音乐播放完毕事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio监听播放完毕</title>
</head>
<body>
<audio src="1.mp3" id="audio" controls="true" autoplay="true">
<!-- <source src="1.mp3" type="audio/mpeg"> -->
Your browser does not support the audio element.
</audio>
<script>
var audio = document.getElementById("audio");
audio.loop = false;
audio.addEventListener('ended', function () {
alert('over');
}, false);
</script>
</body>
</html>
要实现自动循环播放，暂时没有找到相关方法，因为autoplay这条路不行了。
通过点击一个，其他顺序播放倒是可以实现。
<body>
<audio controls="controls" autoplay="autoplay" id="audio" src="1.mp3"></audio>
<script type="text/javascript">
var i = 0;
var audios=[,"2.mp3","3.mp3","4.mp3"];
document.getElementById("audio").onended = function(){
if(audios[i]){
this.setAttribute('src',audios[i]);i++;
}else{
alert('没有音乐了');
}
};
</script>
</body>
查阅网上相关资料，博客地址 https://www.jb51.net/article/80602.htm
只支持在IE浏览器播放，而且发现播放时长一直是00:00，有时间的话再去改进下这个js。虽然说在谷歌中需要根据浏览器改写 window.attachEvent 时间，用addEventListener，但是还是无效。
if (window.attachEvent) {
window.attachEvent("onload", foo);
} else if (window.addEventListener) {
window.addEventListener("load", foo, false);
}
弄完之后，放到外网，配置个nginx，再制作一个二维码，扫码听歌哈哈。