web音乐播放器

今天闲暇时间，花了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/