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 width: 400px;
14 margin-top: 50px;
15 }
16 #con p
17 {
18 padding-left: 20px;
19 width: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>
