Partial Upload-202212200200

README.md

@@ -21,6 +21,9 @@ TODO：
 
 ---
 Changelog:
+α-202212191407：
+- 主体框架已经添加了随机播放和循环播放的按钮，逻辑正在加紧编写中，目前暂时不可用。
+- 支持上一首和下一首切换了！
 α-202212141523：
 - 对于短标题已经不会滚动并省略了
 - 歌曲播放到下一曲的时候会自动更新状态

css/style.css

@@ -61,6 +61,11 @@
     border: 1px solid #ff6e06;
 }
 
+.gray{
+    background-color: #9e9e9e;
+    border: 1px solid #9e9e9e;
+}
+
 .red{
 	background-color: #ff3d40;
 	border: 1px solid #ff3d40;

index.html

@@ -13,18 +13,21 @@
     <div>
         <div id="searchbox">
             <input type="text" id="search-song">
-            <button type="button" onclick="getsongs()" id="searchbtn">搜索</button>
+            <button type="button" onclick="javascript:getsongs()" id="searchbtn">搜索</button>
         </div>
-        <button type="button" onclick="getplaylist()" class="btn orange">查看列表</button>
-        <button type="button" onclick="playthelist()" class="btn orange">播放列表</button>
-        <button type="button" onclick="playnext()" class="btn orange">立即切歌</button>
-        <button type="button" onclick="gethistory()" class="btn orange">播放历史</button>
-        <button type="button" onclick="ClearList()" class="btn orange">清空记录</button>
+        <button type="button" onclick="javascript:getplaylist()" class="btn orange">查看列表</button>
+        <button type="button" onclick="javascript:playthelist()" class="btn orange">播放列表</button>
+        <button type="button" onclick="javascript:playlast()" class="btn orange">上一首</button>
+		<button type="button" onclick="javascript:playnext()" class="btn orange">下一首</button>
+        <button type="button" onclick="javascript:gethistory()" class="btn orange">播放历史</button>
+        <button type="button" onclick="javascript:ClearList()" class="btn orange">清空记录</button>
+		<button type="button" onclick="javascript:void(0)" class="btn gray">随机播放 <span id="random-stat">关</span></button>
+		<button type="button" onclick="javascript:void(0)" class="btn gray">循环播放 <span id="cycle-stat">关</span></button>
 		<br />
 		<input type="text" placeholder="列表ID" name="listID" id="listid"/>
-		<button type="button" onclick="PullToCloud()" class="btn red">接收云列表</button>
-		<button type="button" onclick="PushToCloud()" class="btn red">上传云列表</button>
-		<button type="button" onclick="deleteCloudList()" class="btn red">删除云列表</button>
+		<button type="button" onclick="javascript:PullToCloud()" class="btn red">接收云列表</button>
+		<button type="button" onclick="javascript:PushToCloud()" class="btn red">上传云列表</button>
+		<button type="button" onclick="javascript:deleteCloudList()" class="btn red">删除云列表</button>
         <div>
             <div id="nowplaystat">Now Playing: <span id="nowplay">None</span></div>
             <audio src="#" controls id="Player"></audio>

js/main.js

@@ -1,6 +1,7 @@
 window.onload = function(){
     createlist();
-    setInterval(checkplay, 3000);
+	InitPlayMode();
+    checkplayInterval = setInterval(checkplay, 3000);
 }
 
 // Title Controller
@@ -320,6 +321,48 @@ function playnext(){
     }
 }
 
+// 播放上一首
+function playlast() {
+	if(list.isEmpty()){
+	    console.log("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
+	    alert("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
+	    return;
+	}
+	if(nowPlay <= 0){
+		nowPlay = list.size() - 1;
+	}else{
+		nowPlay -= 1;
+	}
+	var prior = list.getElem(nowPlay);
+	playmusic(prior.songid, prior.songname, prior.artist);
+	if ( TitleControl.getActivateStat() == true ) {
+	    TitleControl.reset();
+	    TitleControl.setTitleManual("Loading...");
+	    TitleControl.setTargetTitle(prior.songname + " - " + prior.artist);
+	    TitleControl.startLoop();
+	}
+}
+
+function processCyclePlay(){
+	switch ( CyclePlayMode ){
+		case 0: 	// OFF
+			if ( nowPlay >= (list.size() - 1) ) {
+				clearInterval(checkplayInterval);
+				console.log("顺序播放已完成，已清除播放状态监听。");
+			} 
+			break;
+		case 1: 	// single cycle	
+			document.getElementById("Player").play();
+			break;
+		case 2:		// list cycle
+			if ( false ) {
+				
+			}
+			break;
+		default: break;
+	}
+}
+
 // 检测是否播放完毕
 function checkplay(){
     // 为了防止播放列表结束以后一直调用playnext产生过多的alart，所以需要检测播放列表是否为空
@@ -330,6 +373,8 @@ function checkplay(){
         }
     }else{
         //clearInterval(checkplay);
+		console.log("播放列表为空，已清除播放状态监听。");
+		clearInterval(checkplayInterval)
     }
 }
 
@@ -592,3 +637,35 @@ function jumpTo163CM( songid ) {
 	}
 }
 
+function InitPlayMode() {
+	// About PlatMode
+	RandomMode = 0;
+	CyclePlayMode = 0;
+}
+
+function changeRandButton() {
+	switch( RandomMode ) {
+		case 0  : document.getElementById('random-stat').innerHTML = "关";   break;
+		case 1  : document.getElementById('random-stat').innerHTML = "开";   break;
+		default : document.getElementById('random-stat').innerHTML = "null"; break;
+	}
+}
+
+function changeRandomMode() {
+	RandomMode = (RandomMode + 1) % 2;
+	changeRandButton();
+}
+
+function changeCycleButton() {
+	switch( CyclePlayMode ) {
+		case 0  : document.getElementById('cycle-stat').innerHTML = "关";   break;
+		case 1  : document.getElementById('cycle-stat').innerHTML = "列表"; break;
+		case 2  : document.getElementById('cycle-stat').innerHTML = "单曲"; break;
+		default : document.getElementById('cycle-stat').innerHTML = "null"; break;
+	}
+}
+
+function changeCyeleMode() {
+	CyclePlayMode = (CyclePlayMode + 1) % 3;
+	changeCycleButton();
+}