首页 > 代码库 > H5-音频列表音乐切换
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=http://www.mamicode.com/arr[i]; 51 m.innerHTML="当前播放的歌曲是:"+pp[i].innerHTML; 52 } 53 } 54 } 55 } 56 57 </script> 58 </body> 59 </html>
H5-音频列表音乐切换
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。