diff --git a/css/player.css b/css/player.css index e1777a2..d61fb53 100644 --- a/css/player.css +++ b/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; } /* 音乐进度条区域 */ diff --git a/css/small.css b/css/small.css index a73d05e..6c48808 100644 --- a/css/small.css +++ b/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; diff --git a/js/functions.js b/js/functions.js index ff1a3c8..34d667d 100644 --- a/js/functions.js +++ b/js/functions.js @@ -216,6 +216,10 @@ $(function(){ pause(); }); + // 循环顺序的处理 + $(".btn-order").click(function(){ + orderChange(); + }); // 上一首歌 $(".btn-prev").click(function(){ prevMusic(); diff --git a/js/player.js b/js/player.js index 23af39f..1a79c4e 100644 --- a/js/player.js +++ b/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); // 播放器错误处理 }