播放顺序控制

css/player.css

@@ -623,32 +623,55 @@ body {
     height: 100%;
     position: relative;
     margin: 0 10px;
+    display: flex;
+    align-items: center;
 }
 .con-btn a{
     display: inline-block;
-    position: absolute;
-    top: 50%;
+    /* position: absolute;
+    top: 50%; */
+    flex: 1;
 }
 .btn-prev{
     background-position: 0 -30px;
     width: 19px;
     height: 20px;
-    margin-top: -10px;
+    /* margin-top: -10px; */
 }
 
 .btn-play{
-    width: 21px;
+    width: 19px;
     height: 29px;
-    margin-top: -14.5px;
+    flex: 0 0 30px !important;
+    /* margin-top: -14.5px; */
     left: 50%;
-    margin-left: -10.5px;
+    /* margin-left: -10.5px; */
 }
 .btn-next{
     background-position: 0 -52px;
     right: 0;
     width: 19px;
     height: 20px;
-    margin-top: -10px;
+    /* margin-top: -10px; */
+}
+.btn-order{
+    background-position: 0 -205px;
+    right: 0;
+    width: 19px;
+    height: 25px;
+    /* margin-top: -10px; */
+}
+.btn-order-1{
+  background-position: 0 -231px;
+  height: 25px;
+}
+.btn-order-2{
+  background-position: 0 -204px;
+  height: 25px;
+}
+.btn-order-3{
+  background-position: 0 -73px;
+  height: 20px;
 }
 
 /* 音乐进度条区域 */

css/small.css

@@ -103,12 +103,12 @@
     
     /*控制按钮区域缩小*/
     .con-btn {
-        width: 100px;
+        width: 120px;
     }
     /*进度条调整*/
     .progress {
         width: auto;
-        margin-left: 110px;
+        margin-left: 130px;
         margin-right: 10px;
         height: 100%;
         position: relative;

js/functions.js

@@ -216,6 +216,10 @@ $(function(){
         pause();
     });
     
+    // 循环顺序的处理
+    $(".btn-order").click(function(){
+        orderChange();
+    });
     // 上一首歌
     $(".btn-prev").click(function(){
         prevMusic();

js/player.js

@@ -60,6 +60,19 @@ function pause() {
     }
 }
 
+// 循环顺序
+function orderChange() {
+  if(!rem.order){
+    rem.order = 2
+  }
+  rem.order++;
+  if(rem.order > 3){
+    rem.order = 1
+  }
+  var orderDiv = $(".btn-order")
+  orderDiv.removeClass()
+  orderDiv.addClass("player-btn btn-order btn-order-" + rem.order)
+}
 // 播放
 function audioPlay() {
     rem.paused = false;     // 更新状态（未暂停）
@@ -94,7 +107,28 @@ function prevMusic() {
 
 // 播放下一首歌
 function nextMusic() {
-    playList(rem.playid + 1);
+  switch (rem.order ? rem.order : 1) {
+    case 1,2: 
+      playList(rem.playid + 1);
+      break;
+    case 3: 
+      if (musicList[1] && musicList[1].item.length) {
+        var id = parseInt(Math.random() * musicList[1].item.length)
+        playList(id);
+      }
+      break;
+    default:
+      playList(rem.playid + 1); 
+      break;
+  }
+}
+// 自动播放时的下一首歌
+function autoNextMusic() {
+  if(rem.order && rem.order === 1) {
+    playList(rem.playid);
+  } else {
+    nextMusic()
+  }
 }
 
 // 歌曲时间变动回调函数
@@ -203,7 +237,7 @@ function initAudio() {
     rem.audio[0].addEventListener('timeupdate', updateProgress);   // 更新进度
     rem.audio[0].addEventListener('play', audioPlay); // 开始播放了
     rem.audio[0].addEventListener('pause', audioPause);   // 暂停
-    rem.audio[0].addEventListener('ended', nextMusic);   // 播放结束
+    $(rem.audio[0]).on('ended', autoNextMusic);   // 播放结束
     rem.audio[0].addEventListener('error', audioErr);   // 播放器错误处理
 }