<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>音乐播放器</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ width: 320px; overflow: hidden; margin: 20px auto; } header,footer{ height: 40px; line-height: 40px; background-color: orange; text-align: center; } li{ height: 50px; line-height: 50px; border: 1px solid red; border-top: none; font-size: 15px; text-indent: 20px; list-style: none; } #ado{ width: 100%; height: 20px; margin-top: 10px; } .sty{ background-color: pink; } </style> </head> <body> <header>音乐播放器</header> <section> <ul> <li>蒲公英的约定</li> <li>晴天</li> <li>说好不哭</li> <li>英文</li> <li>嘻游记</li> </ul> </section> <audio src="" id="ado" controls=""></audio> <footer> 当前播放的是：<span id="con"></span> </footer> <script> var lis=document.querySelectorAll('li') var ado=document.querySelector('#ado') var con=document.querySelector('#con') var arr=['audio/pugongyingdeyueding.mp3','audio/qingtian.mp3','audio/shuohaobuku.mp3','audio/Sophie Rose - Famous.mp3','audio/xiyouji.mp3'] for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ for(var i=0;i<lis.length;i++){ if(this==lis[i]){ lis[i].className='sty' ado.src=arr[i]; ado.play(); con.innerHTML=lis[i].innerHTML; // 自动播放: var a=i; ado.onended=function(){ a++; if(a>lis.length-1){//如果音乐播放到最后一首的时候，音乐跳转到第一首音乐 a=0; } for(var j=0;j<lis.length;j++){ lis[j].className='' } con.innerHTML=lis[a].innerHTML; ado.src=arr[a] ado.play() lis[a].className='sty' } }else{ lis[i].className='' } } } } </script> </body> </html>