<!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,再製作一個二維碼,掃碼聽歌哈哈。