<!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>