移除新UI、分页相关的代码（之后可能会Revert）

分离了云列表，暂时注释掉播放器新UI相关代码
nav add, player control testing
2023-09-08 02:46:39 +08:00 · 2023-09-08 02:45:02 +08:00 · 2023-07-14 11:52:28 +08:00 · 2023-01-02 16:32:09 +08:00 · 2022-12-20 03:05:02 +08:00 · 2022-12-20 03:03:54 +08:00
5 changed files with 274 additions and 165 deletions
--- a/README.md
+++ b/README.md
@ -18,16 +18,30 @@ TODO：
 * [ ] Bug: 在歌曲检索的时候列表高度莫名其妙变高了，需要更正。
 * [x] TitleControl的Activate机制优化，自动与StartLoop绑定。**（正在测试中）**
 * [x] 更改一下循环逻辑，在结尾增加一定空格 **（勉强能用，需要修正）**
+* [ ] 随机播放逻辑代码
+* [ ] 循环播放逻辑代码测试和调整
+* [ ] 加入“我喜欢的音乐”（工程量略大）

 ---
 Changelog:
+α-202212200258：
+- 重构播放检测逻辑
+- 此版本将从原版本签出，单独对随机播放、循环播放等新特性进行开发。
+- 特别提示：如果针对原版本的开发，将带有origin标识，例如：α-202212200258-origin，此后针对某些版本的特别优化将会以类似形式表示，届时会特别说明。
+
+α-202212191407：
+- 主体框架已经添加了随机播放和循环播放的按钮，逻辑正在加紧编写中，目前暂时不可用。
+- 支持上一首和下一首切换了！
+
 α-202212141523：
 - 对于短标题已经不会滚动并省略了
 - 歌曲播放到下一曲的时候会自动更新状态
 - 修正了播放暂停图标
 - 切歌的时候增加了一个"Loading..."切换过渡
+
 α-202212140346：
 - 如果你离开了当前播放页面的话，就会修改其标题并展示当前正在播放的音乐以及播放状态。
+
 β-202212091822:
 - 为了解决搜索列表高度不均的问题，添加了不支持播放歌曲跳转网易云的功能
 - 历史记录也可以删除啦！经过补充，我们为历史记录列表增加了删除按钮。
--- a/css/style.css
+++ b/css/style.css
@ -1,3 +1,11 @@
+body {
+    margin: 0;
+}
+
+#outter-container{
+    margin: 8px;
+}
+
 #search-song{
    outline-style: none;
    border: 1px solid #ccc;
@ -16,7 +24,7 @@
 #reslist{
    padding: 10px;
    margin-top: 0px;
-    margin-bottom: 40px;
+    margin-block-end: 0px;
 }

 #reslist > li{
@ -61,6 +69,11 @@
    border: 1px solid #ff6e06;
 }

+.gray{
+    background-color: #9e9e9e;
+    border: 1px solid #9e9e9e;
+}
+
 .red{
 	background-color: #ff3d40;
 	border: 1px solid #ff3d40;
@ -99,6 +112,7 @@
    background-color: #fff;
    border-top: 1px solid #ccc;
    z-index: 100;
+
 }

 #Player > div{
@ -281,4 +295,4 @@ h1{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
-}
+}
--- a/index.html
+++ b/index.html
@ -6,28 +6,33 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/main.js"></script>
+    <script src="js/cloudlist.js"></script>
    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
    <h1>This is a Web Player for 163 CloudMusic.</h1>
-    <div>
+    <div id="outter-container">
        <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:changeRandomMode(0)" class="btn gray">随机播放 <span id="random-stat">关</span></button>
+		<button type="button" onclick="javascript:changeCyeleMode(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>
+            </div>
        </div>
        <div id="search-result">
            <span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br />
--- a/js/cloudlist.js
+++ b/js/cloudlist.js
@ -0,0 +1,64 @@
+// 推送到云播放列表
+function PushToCloud(){
+	var server_api = "http://localhost:8080/musiccloud.php?option=upload";
+	var xhr = new XMLHttpRequest();
+	var historyList = JSON.parse(localStorage.getItem("historyList"));
+	var list_id = document.getElementById("listid").value;
+	var msg = JSON.stringify({
+		"list_id": list_id,
+		"length": historyList.length,
+		"list": convertHist2CloudList(historyList)
+	});
+	var data = new FormData();
+	data.append("payload", msg);
+	xhr.open("POST", server_api, true);
+	xhr.send(data);
+	xhr.onreadystatechange = function(){
+		var obj = JSON.parse(xhr.responseText);
+		if(obj.statusCode == 0){
+			alert("sucess!")
+			console.log("Success! listID is " + obj.list_id);
+		}else{
+			if(obj.statusCode == -1){
+				alert("This ListID has been used, please change another one.");
+			} else {
+				alert("Upload failed! Try yo upload again.")
+			}
+			console.log("Send Failed.");
+		}
+	}
+}
+
+// 拉取云播放列表
+function PullToCloud(){
+	var listid = document.getElementById("listid").value;
+	var server_api = `http://localhost:8080/musiccloud.php?option=getlist&list=${listid}`;
+    var xhr = new XMLHttpRequest();
+	xhr.open("GET", server_api, true);
+	xhr.send();
+	xhr.onreadystatechange = function(){
+		console.log(xhr.responseText);
+		var obj = JSON.parse(xhr.responseText);
+		console.log(obj);
+		if(obj.statusCode == 0){
+			// title
+			document.getElementById('keyword').innerHTML = `列表（${obj.list_id}）`;
+			// list
+			var reslist = document.getElementById("reslist");
+			reslist.innerHTML = "";
+			for(var i = 0; i < obj.list.length; i++){
+			    reslist.innerHTML += `<li>${obj.list[i].name} - ${obj.list[i].author}` + 
+			    `<span class="">` + 
+				`<button type="button" id="playbtn" onclick="javascript:addlist(${obj.list[i].id}, '${obj.list[i].name}', '${obj.list[i].author}')">加入播放列表</button>` + 
+				`</span></li>`;
+            }
+		}else{
+			;
+		}
+	}
+}
+
+function deleteCloudList(){
+	//code...
+	console.log("No working...")
+}
--- a/js/main.js
+++ b/js/main.js
@ -1,19 +1,17 @@
 window.onload = function(){
    createlist();
-    setInterval(checkplay, 3000);
+	InitPlayMode();
 }

 // Title Controller
 class TitleStat{
    constructor( originTitle ){
        this.originTitle = originTitle;
-        // this.TempTitle = this.TargetTitle;
    }

    GlobalInterval = null;
    OriginTitle = document.title;
    TargetTitle = "";
-    // TempTitle = "";     // Used to determine if the title has changed
    SCROLL_SPEED = 1000;
    ActivateStat = false;

@ -31,7 +29,6 @@ class TitleStat{
    
    setTargetTitle( title ){
        this.TargetTitle = title;
-        // console.log( this );
    }

    setScrollSpeed( speed ){
@ -81,13 +78,6 @@ class TitleStat{
    }

    scorllTheTitle() {
-        // console.log("Title Scroll!"); //Debug
-        // if ( this.TempTitle == undefined ) {
-        //     console.warn( "this.TempTitle undefined" );
-        //     console.log( this );
-        //     this.TempTitle = this.TargetTitle;
-        // }
-
        // 此处的this指的是window对象
        if( document.getElementById("Player").paused == false ){
            document.title = "[▶️] " + this.userdefines_title.TempTitle.substring(0,20) + "...";
@ -99,19 +89,97 @@ class TitleStat{
    }
 }

+// Player Controller
+class PlayerControl {
+	constructor() {
+		this.playerObject = document.getElementById('Player');
+		this.ListenerStatus = false;
+	}
+ 
+	setFunction() {
+		this.FuncObj = this.playStatCheck;
+	}
+ 
+	enableListener(func) {
+		this.playerObject.addEventListener('ended', func);
+		this.ListenerStatus = true;
+		console.log("启用播放器播放结束事件监听");
+	}
+ 
+	disableListener(func) {
+		this.playerObject.removeEventListener('ended', func);
+		this.ListenerStatus = false;
+		console.log("停用播放器播放结束事件监听");
+	}
+ 
+	getListenerStatus() {
+		return this.ListenerStatus;
+	}
+ 
+	startCheck() {
+		if (this.ListenerStatus) {
+			this.disableListener(this.FuncObj);
+		}
+		this.enableListener(this.FuncObj);
+	}
+ 
+	stopCheck() {
+		if (this.ListenerStatus) {
+			this.disableListener(this.FuncObj);
+		} else {
+			console.error("失败！");
+		}
+	}
+ 
+	/* 默认函数 */
+	playStatCheck() {
+		console.log(this);
+		// debug
+		console.warn("当前模式：" + CyclePlayMode);
+		// 是否单曲？
+		if (CyclePlayMode == 2) {
+			// 从头开始
+			this.playerObject.play();
+			console.log("洗脑的单曲循环！");
+			return;
+		}
+ 
+		// 播放到列表尾部，检查播放状态是否为0（单次播放列表）
+		if (nowPlay >= (list.size + 1)) {
+			if (CyclePlayMode === 0) {
+				if (this.ListenerStatus) {
+					// 播放列表完毕就清除事件监听器
+					this.disableListener(this.playStatCheck);
+					console.log("播放完毕，已清除事件监听。");
+					return;
+				} else {
+					// 事件监听器未打开
+					console.error("关闭失败，事件监听器未启用。");
+					return;
+				}
+			}
+		}
+		// Safe
+		if (this.playerObject.ended === false) {
+			console.log("安全模式| 歌曲未完播，安全执行函数");
+			return;
+		}
+		// 切歌
+		playnext();
+	}
+ }
+
 // Title Control
-// var originTitle = document.title;
 let TitleControl = new TitleStat(document.title);
-// TitleControl.setTargetTitle("Song!");
+// Window OnBlur
 window.onblur = () => {
-    // document.title = "Song!";
-    // TitleControl.setTargetTitle("Song!")
    console.log("您已离开播放器！");
    TitleControl.setScrollSpeed(500);
    TitleControl.setTargetTitle(document.getElementById("nowplay").innerHTML);
    TitleControl.startLoop();
 }

+// Window OnFocus
 window.onfocus = () => {
    // document.title = originTitle;
    console.log("您已回到播放器！");
@ -129,12 +197,9 @@ function getsongs(){
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
-           //console.log(xhr.responseText);
           var obj = JSON.parse(xhr.responseText);
-           //console.log(obj.result.songs);
           console.log(obj);
           var list = obj.result.songs;
-           //for(i = 0; i < obj.result.songs.length; i++){
           for(var i = 0; i < list.length; i++){
               artiststr = getArtist(list[i]);
               console.log({"songid":list[i].id, "songname":list[i].name, "artist":artiststr});
@ -151,7 +216,6 @@ function getsongs(){
               }
           }
        }else{
-            //alert(xhr.statusText);
 			console.warn("WARNNING：API服务器响应失败");
        }
    }
@ -183,43 +247,6 @@ function playmusic(playid, songname, artist){
    inserthistory(playid, songname, artist);
 }

-// 队列 -- Writtrn By Copilot & Web
-function Queue(){
-    this.items = [];
-
-    Queue.prototype.nqueue = (element) => {
-        this.items.push(element);
-    }
-
-    Queue.prototype.dequeue = () => {
-        return this.items.shift();
-    }
-
-    Queue.prototype.front = () => {
-        return this.items[0];
-    }
-
-    Queue.prototype.isEmpty = () => {
-        return this.items.length == 0;
-    }
-
-    Queue.prototype.clear = () => {
-        this.items = [];
-    }
-
-    Queue.prototype.size = () => {
-        return this.items.length;
-    }
-
-    Queue.prototype.toString = () => {
-        var str = "";
-        for(var i = 0; i < this.items.length; i++){
-            str += this.items[i] + " ";
-        }
-        return str;
-    }
-}
-
 // 列表
 function List(){
 	this.items = [];
@ -286,7 +313,6 @@ function createlist(){

 // 添加到播放列表
 function addlist(songid, songname, artist){
-    // list.nqueue({"songid":songid, "songname":songname, "artist":artist});
 	for (var i = 0; i < list.getLength(); i++) {
 		if(list.getElem(i).songid == songid){
 			console.log(`${songname} - ${artist} 已存在于播放列表`);
@ -304,7 +330,6 @@ function playnext(){
        alert("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
        return;
    }
-    // var next = list.dequeue();
 	if(nowPlay >= (list.size() - 1)){
 		nowPlay = 0;
 	}else{
@ -312,6 +337,7 @@ function playnext(){
    }
 	var next = list.getElem(nowPlay);
 	playmusic(next.songid, next.songname, next.artist);
+	// 标题控制
    if ( TitleControl.getActivateStat() == true ) {
        TitleControl.reset();
        TitleControl.setTitleManual("Loading...");
@ -320,17 +346,45 @@ function playnext(){
    }
 }

-// 检测是否播放完毕
-function checkplay(){
-    // 为了防止播放列表结束以后一直调用playnext产生过多的alart，所以需要检测播放列表是否为空
-    if(!list.isEmpty()){
-        if(document.getElementById("Player").ended){
-            // 播放完毕后自动播放下一首
-            playnext();
-        }
-    }else{
-        //clearInterval(checkplay);
-    }
+// 播放上一首
+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) ) {
+				
+			} 
+			break;
+		case 1: 	// single cycle	
+			document.getElementById("Player").play();
+			break;
+		case 2:		// list cycle
+			if ( false ) {
+				
+			}
+			break;
+		default: break;
+	}
 }

 // 播放列表
@ -347,29 +401,14 @@ function playthelist(){

 // 获取播放列表
 function getplaylist(){
-    //var playlist = document.getElementById("playlist");
-    //playlist.innerHTML = "";
    var reslist = document.getElementById("reslist");
    reslist.innerHTML = "";
    for(var i = 0; i < list.size(); i++){
        reslist.innerHTML += `<li>${list.items[i].songname} - ${list.items[i].artist}<span class="btn-series"><button type="button" id="delbtn" onclick="javascript:RemoveItemFromListByID(${i})">删除</button></span></li>`;
-        //console.log(`${list.items[i].songname} - ${list.items[i].artist}`);
    }
    document.getElementById('keyword').innerHTML = "当前播放列表";
 }

-/* // -- Writtrn By Copilot
-function RemoveItemFromList(songid){
-    for(var i = 0; i < list.size(); i++){
-        if(list.items[i].songid == songid){
-            list.items.splice(i, 1);
-            break;
-        }
-    }
-    getplaylist();
-}
-*/
-
 // 删除指定序号的音乐 -- Writtrn By Copilot
 function RemoveItemFromListByID(uid){
    list.items.splice(uid, 1);
@ -395,7 +434,6 @@ function inserthistory(songid, songname, artist){
    }
    // 如果不存在，则插入
    if(!flag){
-        // historyList.push({"songid":songid, "songname":songname, "artist":artist, "playtime":new Date().getTime()});
        historyList.push({"songid":songid, "songname":songname, "artist":artist});
    }
    // 存储到本地
@ -465,6 +503,7 @@ function ClearthePlaylist(){
    }
 }

+// 将历史记录转换为云列表可接受形式
 function convertHist2CloudList(origin){
 	// var temp = JSON.parse(origin);
 	var result = []
@ -478,74 +517,7 @@ function convertHist2CloudList(origin){
 	return result;
 }

-// 推送到云播放列表
-function PushToCloud(){
-    // Cloud Prepareing...
-	var server_api = "http://localhost:8080/musiccloud.php?option=upload";
-	var xhr = new XMLHttpRequest();
-	var historyList = JSON.parse(localStorage.getItem("historyList"));
-	var list_id = document.getElementById("listid").value;
-	var msg = JSON.stringify({
-		"list_id": list_id,
-		"length": historyList.length,
-		"list": convertHist2CloudList(historyList)
-	});
-	var data = new FormData();
-	data.append("payload", msg);
-	xhr.open("POST", server_api, true);
-	xhr.send(data);
-	xhr.onreadystatechange = function(){
-		var obj = JSON.parse(xhr.responseText);
-		if(obj.statusCode == 0){
-			alert("sucess!")
-			console.log("Success! listID is " + obj.list_id);
-		}else{
-			if(obj.statusCode == -1){
-				alert("This ListID has been used, please change another one.");
-			} else {
-				alert("Upload failed! Try yo upload again.")
-			}
-			console.log("Send Failed.");
-		}
-	}
-}
-
-// 拉取云播放列表
-function PullToCloud(){
-    // Cloud Prepareing...
-	var listid = document.getElementById("listid").value;
-	// var server_api = `http://localhost:12345/getMusicList?listid=${listid}`;
-	var server_api = `http://localhost:8080/musiccloud.php?option=getlist&list=${listid}`;
-    var xhr = new XMLHttpRequest();
-	xhr.open("GET", server_api, true);
-	xhr.send();
-	xhr.onreadystatechange = function(){
-		console.log(xhr.responseText);
-		var obj = JSON.parse(xhr.responseText);
-		console.log(obj);
-		if(obj.statusCode == 0){
-			// title
-			document.getElementById('keyword').innerHTML = `列表（${obj.list_id}）`;
-			// list
-			var reslist = document.getElementById("reslist");
-			reslist.innerHTML = "";
-			for(var i = 0; i < obj.list.length; i++){
-			    reslist.innerHTML += `<li>${obj.list[i].name} - ${obj.list[i].author}` + 
-			    `<span class="">` + 
-				`<button type="button" id="playbtn" onclick="javascript:addlist(${obj.list[i].id}, '${obj.list[i].name}', '${obj.list[i].author}')">加入播放列表</button>` + 
-				`</span></li>`;
-            }
-		}else{
-			;
-		}
-	}
-}
-
-function deleteCloudList(){
-	//code...
-	console.log("No working...")
-}
-
+// 删除历史记录
 function deleteHistory( count ) {
 	// get HistoryList from LocalStorage
 	var historyList = JSON.parse( localStorage.getItem( "historyList" ) );
@ -582,6 +554,7 @@ function deleteHistory( count ) {
 	localStorage.setItem( "historyList", JSON.stringify( historyList ) );
 }

+// 无版权音乐跳转到网易云
 function jumpTo163CM( songid ) {
 	console.log("因为没钱，所以放不了，要不你自己去官网开会员听？");
 	if ( confirm( "因为没钱，所以放不了，要不你自己去官网开会员听？" ) ){
@ -592,3 +565,42 @@ function jumpTo163CM( songid ) {
 	}
 }

+// 初始化播放模式
+function InitPlayMode() {
+	// About PlatMode
+	RandomMode = 0;
+	CyclePlayMode = 0;
+	PlayerController = new  PlayerControl();
+}
+
+// 更改随机播放模式按钮
+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;
+	console.log(`当前的播放模式：${document.getElementById('cycle-stat').innerHTML}, ${CyclePlayMode}`)
+	changeCycleButton();
+}
Author	SHA1	Message	Date
Starlight-0208	2fee830dd0	移除新UI、分页相关的代码（之后可能会Revert）	2023-09-08 02:46:39 +08:00
Starlight-0208	61c694595f	分离了云列表，暂时注释掉播放器新UI相关代码	2023-09-08 02:45:02 +08:00
Starlight-0208	aac8199c32	nav add, player control testing	2023-07-14 11:52:28 +08:00
Starlight-0208	f534f6fa26	Partial upload-202301021631	2023-01-02 16:32:09 +08:00
Starlight-0208	8d5168fc2a	update README.md	2022-12-20 03:05:02 +08:00
Starlight-0208	6e67938dfa	update README.md	2022-12-20 03:03:54 +08:00
Starlight-0208	0a43f924e4	移除大量无效代码和已被注释废弃的代码	2022-12-20 02:55:19 +08:00
Starlight-0208	9b5baa63f5	Partial Upload-202212200252	2022-12-20 02:52:32 +08:00
Starlight-0208	b58d659c89	Partial Upload-202212200200	2022-12-20 02:01:49 +08:00