<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div>
<h4 id="name"></h4>
<br>
<audio id="audio" src="秋裤大叔 - 一晃就老了 (DJ何鹏版).mp3 " controls autoplay="true"></audio><br/>
</div>
<br><br>
<div>
<button id="btn-play" >播放</button>
<button id="btn-stop" >暂停</button>
<button id="btn-pre" >上一首</button>
<button id="btn-next" >下一首</button>
</div>
</body>
<script>
<!--播放-->
var btn1 = document.getElementById("btn-play");
btn1.onclick = function(){
if(audio.paused){
audio.play();
}
}
<!--暂停-->
var btn2 = document.getElementById("btn-stop");
btn2.onclick = function(){
if(audio.played){
audio.pause();
}
}
var music = new Array();
music = ["MC小洲 - 怀念青春","花姐 - 上海滩 (Live)","秋裤大叔 - 一晃就老了 (DJ何鹏版)"];//歌单
var num = 0;
var name = document.getElementById("name");
<!--上一首-->
var btn3 = document.getElementById("btn-pre");
btn3.onclick = function(){
num = (num +2)%3;
audio.src = music[num]+".mp3";
name.innerHTML == music[num];
console.log(music[num])
audio.play();
}
<!--下一首-->
var btn4 = document.getElementById("btn-next");
btn4.onclick = function(){
num = (num +1)%3;
audio.src = music[num]+".mp3";
name.innerHTML == music[num];
audio.play();
}
<!--自动播放下一首-->
audio.addEventListener('ended', function () {
btn4.onclick();
}, false);
</script>
</html>