今天闲暇时间，花了2小时，写了个简单音乐播放器。欢迎大家来吐糟
先看下界面截图
大体实现：播放，停止，上一曲，下一曲，循环播放功能。
知识点：1.html 中audio 2.css 位置fixed
其中audio用到的方法：1.play 2.pause ,属性：1.src 2.loop
对于audio不熟悉的移步到http://www.w3school.com.cn/jsref/dom_obj_audio.asp
其中数据部分是在网上找了的保存在listrings.js中
下边关键时刻代码来了
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>audio测试</title> 7 <meta name="viewport" content="width=device-width" /> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 body { 15 margin-bottom: 50px; 16 } 17 18 .fix { 19 position: fixed; 20 bottom: 0; 21 left: 0; 22 z-index: 99; 23 background-color: rgba(0, 0, 0, .5); 24 right: 0; 25 text-align: center; 26 font-size:0; 27 } 28 29 audio { 30 display: block; 31 width: 100%; 32 } 33 button{ 34 padding: 3px 2px; 35 margin:4px 1px; 36 } 37 .mp3_list { 38 padding: 0; 39 list-style: none; 40 } 41 .mp3_list .mp3_title { 42 padding: 14px 5px; 43 border-bottom: 1px solid #CCCCCC; 44 color: #FFFFFF; 45 background: #1EACEA; 46 text-align: center; 47 } 48 49 .mp3_list li { 50 position: relative; 51 padding: 15px 50px 12px 12px; 52 background: #fff; 53 color: #4C4C4C; 54 overflow: hidden; 55 font-size: 14px; 56 text-overflow: ellipsis; 57 border-bottom: 1px solid #F5F5F5; 58 white-space: nowrap; 59 cursor: pointer; 60 } 61 62 .mp3_list .over, 63 .mp3_list .active { 64 color: #00B7EE; 65 } 66 67 .mp3_list li span { 68 position: absolute; 69 font-size: 12px; 70 right: 0; 71 } 72 </style> 73 </head> 74 75 <body> 76 <div class="fix"> 77 <audio controls autoplay="autoplay"> 78 <source src="http://www.runoob.com/try/demo_source/horse.ogg"></source> 79 浏览器不支持播放器请更换谷歌或升级浏览器 80 </audio> 81 <button id="play">播放</button> 82 <button id="paused">暂停</button> 83 <button id="urls">音乐地址</button> 84 <button id="preurl">上一曲</button> 85 <button id="nexturl">下一曲</button> 86 <button id="loop">循环</button> 87 </div> 88 <ul class="mp3_list"> 89 </ul> 90 <script src="listrings.js"></script> 91 <script type="text/javascript" src="jquery-2.1.0.js"></script> 92 <script> 93 $(function() { 94 var listindex = 0, 95 len = mp3s.length, 96 audio = $("audio")[0], 97 source=$("source")[0]; 98 var initlist = function() { 99 var html = '<div class="mp3_title">音乐列表</div>' 100 for(i = 0; i < len; i++) { 101 html += '<li data-id="' + i + '">' + mp3s[i].title + '<span>' + mp3s[i].desp.split("|")[1] + '</span></li>' 102 } 103 $(".mp3_list").html(html) 104 }; 105 var playaudio = function() { 106 audio.play(); 107 }; 108 //改变音频地址 109 var changeSrc = function(index) { 110 $(".mp3_list li").removeClass("active") 111 $(".mp3_list li").removeClass("over"); 112 audio.src=mp3s[index].songUrl; 113 $("#paused").trigger("click") 114 $(".mp3_list li").eq(index).addClass("active") 115 playaudio() 116 }; 117 //初始化音乐队列 118 initlist(); 119 //默认播放第一首 120 changeSrc(listindex); 121 //监听结束事件 122 $("audio").on("ended", function() { 123 if(++listindex > len) { 124 listindex = 0; 125 } 126 changeSrc(listindex); 127 }); 128 $(".mp3_list").on("mouseover", "li", function() { 129 $(this).addClass("over") 130 }); 131 $(".mp3_list").on("mouseout", "li", function() { 132 $(this).removeClass("over") 133 }); 134 $(".mp3_list").on("click", "li", function() { 135 listindex = $(this).attr("data-id"); 136 changeSrc(listindex) 137 }); 138 //播放 139 $("#play").click(playaudio); 140 $("#paused").click(function() { 141 audio.pause() 142 }); 143 $("#loop").click(function() { 144 var val=audio.loop==true?"循环":"关闭" 145 $(this)[0].innerText=val 146 audio.loop = !audio.loop; 147 }); 148 //当前音乐地址 149 $("#urls").click(function() { 150 alert(audio.currentSrc) 151 }); 152 //上一曲 153 $("#preurl").click(function() { 154 if(--listindex < 0) { 155 listindex = 0; 156 return 157 } else { 158 changeSrc(listindex) 159 } 160 }); 161 //下一曲 162 $("#nexturl").click(function() { 163 if(++listindex > len) { 164 listindex = len; 165 return 166 } else { 167 changeSrc(listindex) 168 } 169 }); 170 171 }) 172 </script> 173 </body> 174 175 </html>
效果狠狠点击 https://huashuaipeng.github.io/music/audio.html
源码地址：https://github.com/huashuaipeng/music
如果发现不能播放的说明资源不存在了。
推荐一篇文章
HTML5 Audio/Video 标签,属性,方法,事件汇总 https://www.douban.com/note/158621500/