H5-音频列表音乐切换

Posted 2020-08-15 舍近求猿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5-音频列表音乐切换相关的知识，希望对你有一定的参考价值。

 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>

以上是关于H5-音频列表音乐切换的主要内容，如果未能解决你的问题，请参考以下文章