1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 audio 12 { 13 400px; 14 margin-top: 50px; 15 } 16 #con p 17 { 18 padding-left: 20px; 19 250px; 20 height: 30px; 21 background: #393939; 22 color: #fff; 23 } 24 #m 25 { 26 margin-top:20px ; 27 margin-bottom: 20px; 28 color: red; 29 } 30 </style> 31 </head> 32 <body> 33 <audio src="" id="ai" controls></audio> 34 <h3 id="m">当前播放歌曲是：</h3> 35 <div id="con"> 36 <p>WeBelieve</p> 37 <p>卷珠帘</p> 38 <p>我的楼兰</p> 39 </div> 40 <script > 41 var ai=document.getElementById('ai'); 42 var m=document.getElementById('m'); 43 var con=document.getElementById('con'); 44 var pp=con.getElementsByTagName('p'); 45 var arr=['WeBelieve.mp3','卷珠帘.mp3','我的楼兰.mp3']; 46 for (i=0;i<pp.length;i++){ 47 pp[i].onclick=function () { 48 for (i=0;i<pp.length;i++){ 49 if(pp[i]==this){ 50 ai.src=arr[i]; 51 m.innerHTML="当前播放的歌曲是："+pp[i].innerHTML; 52 } 53 } 54 } 55 } 56 57 </script> 58 </body> 59 </html>