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

.gitignore

@@ -0,0 +1 @@
+.vscode

README.md

@@ -1,4 +1,57 @@
 # WebPlayer
 
 基于网易云音乐 NodeJS 版 API的在线播放器
-在线demo: [点此](http://150.158.7.169/player)  [新版](http://150.158.7.169/player-nextgen)
+在线demo: [点此](http://150.158.7.169/player)  [新版](http://150.158.7.169/player-nextgen)
+
+TODO：
+* [ ] 增加列表单次循环开关（或者尝试单曲循环？？？）
+* [x] 循环的时候如果在重新获得焦点后没多久就又失去焦点，滚动显示就变得异常的快，可以在控制台的Scroll输出中发现。**（观察中）**
+* [ ] 对于短的标题，它一样去scroll了，没有这个必要。
+* [ ] 需要修正：上传的列表应当是播放列表而不是历史记录
+* [x] 为历史记录列表增加删除按钮
+* [ ] 一键加入将查询结果歌曲加入播放列表（主要是历史记录和云列表）
+* [x] 删除正在播放歌曲之前的歌曲会导致播放次序变得混乱，需要修正
+* [ ] 标题可以展示当前播放的歌曲名称，对长歌名支持滚动显示
+* [x] 规范性调整：把重用部分用class表示，避免id重复。
+* [ ] 列表重新布局：双列布局，第一列显示歌曲名称，第二列显示歌手（字体略小，偏灰色）
+* [ ] 不确定能否完成 ———— 放弃HTML自带audio标签样式，重写播放控制器UI（工程量巨大）
+* [ ] Bug: 在歌曲检索的时候列表高度莫名其妙变高了，需要更正。
+* [x] TitleControl的Activate机制优化，自动与StartLoop绑定。**（正在测试中）**
+* [x] 更改一下循环逻辑，在结尾增加一定空格 **（勉强能用，需要修正）**
+* [ ] 随机播放逻辑代码
+* [ ] 循环播放逻辑代码测试和调整
+* [ ] 加入“我喜欢的音乐”（工程量略大）
+
+---
+Changelog:
+α-202212200258：
+- 重构播放检测逻辑
+- 此版本将从原版本签出，单独对随机播放、循环播放等新特性进行开发。
+- 特别提示：如果针对原版本的开发，将带有origin标识，例如：α-202212200258-origin，此后针对某些版本的特别优化将会以类似形式表示，届时会特别说明。
+
+α-202212191407：
+- 主体框架已经添加了随机播放和循环播放的按钮，逻辑正在加紧编写中，目前暂时不可用。
+- 支持上一首和下一首切换了！
+
+α-202212141523：
+- 对于短标题已经不会滚动并省略了
+- 歌曲播放到下一曲的时候会自动更新状态
+- 修正了播放暂停图标
+- 切歌的时候增加了一个"Loading..."切换过渡
+
+α-202212140346：
+- 如果你离开了当前播放页面的话，就会修改其标题并展示当前正在播放的音乐以及播放状态。
+
+β-202212091822:
+- 为了解决搜索列表高度不均的问题，添加了不支持播放歌曲跳转网易云的功能
+- 历史记录也可以删除啦！经过补充，我们为历史记录列表增加了删除按钮。
+- 因为新按钮的加入，按钮组变得更长了，出现了一些布局问题。现在更改了按钮的布局。
+- 修复了历史记录页面删除按钮与实际删除元素错位的问题
+
+β-202212081209:
+- 修复：删除列表正在播放之前的歌曲之后导致nowPlay错误无法正常使用的问题
+
+ver-20221207001:
+- 云列表同步雏形已成，目前支持把历史播放上传到云数据库了，也支持取回
+- 一改之前KTV式的点歌列表模式，这次采用了真正的列表播放模式，支持列表循环播放了
+- 修复：列表可以无限重复插入同一首歌的问题

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{
@@ -48,9 +56,7 @@
     border: 1px solid #4da7fe;
 }
 
-#btngreen{
-    background-color: #ff6e06;
-    border: 1px solid #ff6e06;
+.btn{
     border-radius: 5px;
     color: #fff;
     padding: 5px 10px;
@@ -58,7 +64,22 @@
     margin-top: 5px;
 }
 
-#btngreen:hover{
+.orange{
+    background-color: #ff6e06;
+    border: 1px solid #ff6e06;
+}
+
+.gray{
+    background-color: #9e9e9e;
+    border: 1px solid #9e9e9e;
+}
+
+.red{
+	background-color: #ff3d40;
+	border: 1px solid #ff3d40;
+}
+
+#btnorange:hover{
     background-color: #ffa632;
     border: 1px solid #ffa632;
 }
@@ -70,8 +91,17 @@
     color: #fff;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute;
-    right: 10px;
+    float: right;
+}
+
+#disablebtn{
+    background-color: #b0b0b0;
+    border: 1px solid #b0b0b0;
+    border-radius: 5px;
+    color: #fff;
+    padding: 5px 10px;
+    cursor: pointer;
+    float: right;
 }
 
 #Player{
@@ -82,6 +112,7 @@
     background-color: #fff;
     border-top: 1px solid #ccc;
     z-index: 100;
+
 }
 
 #Player > div{
@@ -109,7 +140,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    width: 90%;
+    width: 97%;
 }
 
 #delbtn{
@@ -119,8 +150,13 @@
     color: #fff;
     padding: 5px 10px;
     cursor: pointer;
-    position: absolute;
-    right: 10px;
+	float: right;
+	margin-left: 3px;
+}
+
+.btn-series{
+	position: absolute;
+	right: 20px;
 }
 
 @media screen and (max-width: 768px){
@@ -170,7 +206,7 @@
     }
 
     #listitem{
-        width: 80%;
+        width: 97%;
     }
 
     #listitem > a{
@@ -239,7 +275,7 @@
     }
 
     #listitem{
-        width: 75%;
+        width: 97%;
     }
 
     #nowplay{
@@ -259,4 +295,4 @@ h1{
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-}
+}

index.html

@@ -6,23 +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()" id="btngreen">查看列表</button>
-        <button type="button" onclick="playthelist()" id="btngreen">播放列表</button>
-        <button type="button" onclick="playnext()" id="btngreen">立即切歌</button>
-        <button type="button" onclick="gethistory()" id="btngreen">播放历史</button>
-        <button type="button" onclick="removehistory()" id="btngreen">清空记录</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="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 />

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...")
+}

js/main.js

@@ -1,6 +1,189 @@
 window.onload = function(){
     createlist();
-    setInterval(checkplay, 3000);
+	InitPlayMode();
+}
+
+// Title Controller
+class TitleStat{
+    constructor( originTitle ){
+        this.originTitle = originTitle;
+    }
+
+    GlobalInterval = null;
+    OriginTitle = document.title;
+    TargetTitle = "";
+    SCROLL_SPEED = 1000;
+    ActivateStat = false;
+
+    getActivateStat() {
+        return this.ActivateStat;
+    }
+
+    activate(){
+        this.ActivateStat = true;
+    }
+
+    deactivate() {
+        this.ActivateStat = false;
+    }
+    
+    setTargetTitle( title ){
+        this.TargetTitle = title;
+    }
+
+    setScrollSpeed( speed ){
+        this.SCROLL_SPEED = speed;
+    }
+
+    setOriginTitle( title ){
+        this.originTitle = title;
+    }
+
+    setTitleManual( title ){
+        document.title = title;
+    }
+
+    startLoop(){
+        this.activate();
+        clearInterval(this.GlobalInterval);
+        this.TempTitle = this.TargetTitle;
+        if ( this.TempTitle.length < 10 ){
+           this.noScrollTitle();
+        } else {
+            window.userdefines_title = {
+                "TempTitle": this.TargetTitle + "    ",
+            }
+            this.GlobalInterval = setInterval(this.scorllTheTitle, this.SCROLL_SPEED);
+        }   
+    }
+
+    stopLoop(){
+        clearInterval(this.GlobalInterval);
+    }
+
+    reset(){
+        this.stopLoop();
+        delete window.userdefines_title;
+        document.title = this.OriginTitle;
+        this.deactivate();
+    }
+
+    noScrollTitle() {
+        console.log("使用的是非滚动标题！");
+        if( document.getElementById("Player").paused == false ){
+            document.title = "[▶️] " + this.TempTitle;
+        }else{
+            document.title = "[⏸] " + this.TempTitle;
+        }
+    }
+
+    scorllTheTitle() {
+        // 此处的this指的是window对象
+        if( document.getElementById("Player").paused == false ){
+            document.title = "[▶️] " + this.userdefines_title.TempTitle.substring(0,20) + "...";
+        }else{
+            document.title = "[⏸] " + this.userdefines_title.TempTitle.substring(0,20) + "...";
+        }
+        
+        this.userdefines_title.TempTitle = this.userdefines_title.TempTitle.substring(1) + this.userdefines_title.TempTitle.substring(0,1);
+    }
+}
+
+// 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
+let TitleControl = new TitleStat(document.title);
+// Window OnBlur
+window.onblur = () => {
+    console.log("您已离开播放器！");
+    TitleControl.setScrollSpeed(500);
+    TitleControl.setTargetTitle(document.getElementById("nowplay").innerHTML);
+    TitleControl.startLoop();
+}
+
+// Window OnFocus
+window.onfocus = () => {
+    // document.title = originTitle;
+    console.log("您已回到播放器！");
+    TitleControl.reset();
 }
 
 // 搜索音乐
@@ -14,24 +197,26 @@ 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});
                if(list[i].fee == 0 || list[i].fee == 8){
-                    reslist.innerHTML += `<li id="listitem"><a href="javascript:void(0)" onclick="playmusic(${list[i].id}, '${list[i].name}', '${artiststr}')">${list[i].name} - ${getArtist(list[i])}</a>`+
-                    `<button type="button" id="playbtn" onclick="addlist(${list[i].id}, '${list[i].name}', '${artiststr}')">加入播放列表</button></li>`;
+                    reslist.innerHTML += `<li id="listitem"><a href="javascript:void(0)" onclick="javascript:playmusic(${list[i].id}, '${list[i].name}', '${artiststr}')">${list[i].name} - ${getArtist(list[i])}</a>` + 
+                    `<span class="">` + 
+					`<button type="button" id="playbtn" onclick="javascript:addlist(${list[i].id}, '${list[i].name}', '${artiststr}')">加入播放列表</button>` + 
+					`</span></li>`;
                }else{
-                    reslist.innerHTML += `<li>[不支持播放]${list[i].name} - ${getArtist(list[i])}</li>`
+                    reslist.innerHTML += `<li id="listitem">${list[i].name} - ${getArtist(list[i])}`+
+                    `<span class="">` + 
+                    `<button type="button" id="disablebtn" onclick="javascript:jumpTo163CM(${list[i].id})">跳转到网易云</button>` + 
+                    `</span></li>`;
                }
            }
         }else{
-            //alert(xhr.statusText);
+			console.warn("WARNNING：API服务器响应失败");
         }
     }
     document.getElementById("keyword").innerHTML = search.value;
@@ -62,53 +247,80 @@ function playmusic(playid, songname, artist){
     inserthistory(playid, songname, artist);
 }
 
-// 队列 -- Writtrn By Copilot & Web
-function Queue(){
-    this.items = [];
+// 列表
+function List(){
+	this.items = [];
+	List.prototype.insertRear = (element) => {
+		this.items.push(element);
+	}
+	
+	List.prototype.deleteItem = (loc) => {
+		if(loc == undefined) {
+			return false;
+		}
+		
+		this.items.splice(loc, 1);
+		return true;
+	}
+	
+	List.prototype.isEmpty = () => {
+		return this.items.length == 0;
+	}
+	
+	List.prototype.clear = () => {
+		this.items = [];
+	}
+	
+	List.prototype.size = () => {
+		return this.items.length;
+	}
+	
+	List.prototype.getElem = (loc) => {
+		if(loc < 0 || loc == undefined){
+			return undefined;
+		}
+		
+		if(this.isEmpty()){
+			return false;
+		}
+		
+		return this.items[loc];
+	}
 
-    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 = "";
+    // CodeGeeX Written
+    List.prototype.locate = (items) => {
         for(var i = 0; i < this.items.length; i++){
-            str += this.items[i] + " ";
+            if(items == this.items[i]){
+                return i;
+            } else {
+                return undefined;
+            }
         }
-        return str;
     }
+	
+	List.prototype.getLength = () => {
+		return this.items.length;
+	}
 }
 
 // 创建播放列表
 function createlist(){
     // 构造队列
-    list = new Queue();
+    // list = new Queue();
+	list = new List();
+	nowPlay = 0;
 }
 
 // 添加到播放列表
 function addlist(songid, songname, artist){
-    list.nqueue({"songid":songid, "songname":songname, "artist":artist});
-    console.log(`${songname} - ${artist} 已被加入播放列表`);
+	for (var i = 0; i < list.getLength(); i++) {
+		if(list.getElem(i).songid == songid){
+			console.log(`${songname} - ${artist} 已存在于播放列表`);
+			return;
+		}
+	}
+    list.insertRear({"songid":songid, "songname":songname, "artist":artist});
+	console.log(`${songname} - ${artist} 已被加入播放列表`);
 }
 
 // 播放下一首
@@ -118,21 +330,61 @@ function playnext(){
         alert("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
         return;
     }
-    var next = list.dequeue();
-    playmusic(next.songid, next.songname, next.artist);
+	if(nowPlay >= (list.size() - 1)){
+		nowPlay = 0;
+	}else{
+		nowPlay += 1;
+    }
+	var next = list.getElem(nowPlay);
+	playmusic(next.songid, next.songname, next.artist);
+	// 标题控制
+    if ( TitleControl.getActivateStat() == true ) {
+        TitleControl.reset();
+        TitleControl.setTitleManual("Loading...");
+        TitleControl.setTargetTitle(next.songname + " - " + next.artist);
+        TitleControl.startLoop();
+    }
 }
 
-// 检测是否播放完毕
-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;
+	}
 }
 
 // 播放列表
@@ -142,35 +394,21 @@ function playthelist(){
         alert("音乐列表没有歌曲哦，快加入新的音乐吧~");
         return;
     }
-    var next = list.dequeue();
-    playmusic(next.songid, next.songname, next.artist);
+    // var next = list.dequeue();
+    var next = list.getElem(0);
+	playmusic(next.songid, next.songname, next.artist);
 }
 
 // 获取播放列表
 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}<button type="button" id="delbtn" onclick="RemoveItemFromListByID(${i})">删除</button></li>`;
-        //console.log(`${list.items[i].songname} - ${list.items[i].artist}`);
+        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>`;
     }
     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);
@@ -196,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});
     }
     // 存储到本地
@@ -212,9 +449,12 @@ function gethistory(){
     var reslist = document.getElementById("reslist");
     reslist.innerHTML = "";
     for(var i = 0; i < historyList.length; i++){
-        reslist.innerHTML += `<li>${historyList[i].songname} - ${historyList[i].artist}` + 
-        `<button type="button" id="playbtn" onclick="addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>`;
-    }
+        reslist.innerHTML += `<li>${historyList[i].songname} - ${historyList[i].artist}` +
+		`<span class="btn-series">` + 
+		`<button type="button" id="delbtn" onclick="javascript:deleteHistory(${i})">删除</button>` + 
+        `<button type="button" id="playbtn" onclick="javascript:addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>` + 
+		`</span>`;
+	}
     document.getElementById('keyword').innerHTML = "历史记录";
 }
 
@@ -222,4 +462,145 @@ function gethistory(){
 function removehistory(){
     localStorage.removeItem("historyList");
     gethistory();
+}
+
+// 当点击清空列表的时候进行一次确认，如果确认之后再进行删除操作。
+function ClearList(){
+    var Choose = confirm("确定清空歌单吗？(此操作不可逆！)")
+    if(Choose == true){
+        removehistory();
+        console.log("The History List Has been cleared.");
+        return true;
+    }else{
+        console.log("List Clear Canceled!");
+        return false;
+    }
+}
+
+// 添加所有歌曲到播放列表
+function addAllHistorytoPlayList(){
+    var historyList = JSON.parse(localStorage.getItem("historyList"));
+    if(historyList == null){
+        historyList = [];
+    }
+    var reslist = document.getElementById("reslist");
+    reslist.innerHTML = "";
+    for(var i = 0; i < historyList.length; i++){
+        addlist(historyList[i].songid, historyList[i].songname, historyList[i].artist);
+        console.log(`${historyList[i].songname} - ${historyList[i].artist} is add to list.`);
+    }
+    alert("已把历史记录插入到了播放列表");
+    // Planning to Code...
+}
+
+// 清空播放列表
+function ClearthePlaylist(){
+    if(!list.isEmpty()){
+        list.clear();
+        console.log("List Cleared!");
+    }else{
+        console.log("List is empty, not need to clear.")
+    }
+}
+
+// 将历史记录转换为云列表可接受形式
+function convertHist2CloudList(origin){
+	// var temp = JSON.parse(origin);
+	var result = []
+	for (var i = 0; i < origin.length; i++) {
+		result.push({
+			"name"	: origin[i].songname,
+			"id"	: origin[i].songid,
+			"author": origin[i].artist
+		});
+	}
+	return result;
+}
+
+// 删除历史记录
+function deleteHistory( count ) {
+	// get HistoryList from LocalStorage
+	var historyList = JSON.parse( localStorage.getItem( "historyList" ) );
+	// is null?
+    if( historyList == null ){
+        // failed
+    }
+    
+	// if count is smaller than List length, throw error
+	if ( count  > historyList.length ){
+		console.log( "本次删除无效！\nThis deletion is invaild." );
+		return;
+	}
+	
+	// console log output
+	console.log(`${historyList[count].songname} - ${historyList[count].artist} (位于 ${count}) 已从历史记录删除.`)
+	
+    // find the item and delete it.
+    historyList.splice( count, 1 );
+	
+	// Refresh the page
+	var reslist = document.getElementById( "reslist" );
+	reslist.innerHTML = "";
+	for( var i = 0; i < historyList.length; i++ ){
+	    reslist.innerHTML += `<li>${historyList[i].songname} - ${historyList[i].artist}` +
+	    `<span class="btn-series">` + 
+	    `<button type="button" id="delbtn" onclick="javascript:deleteHistory(${i})">删除</button>` + 
+	    `<button type="button" id="playbtn" onclick="javascript:addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button>` + 
+	    `</span></li>`;
+	}
+	document.getElementById( 'keyword' ).innerHTML = "历史记录";
+	
+	// put the HistoryList back into the LocalStorage
+	localStorage.setItem( "historyList", JSON.stringify( historyList ) );
+}
+
+// 无版权音乐跳转到网易云
+function jumpTo163CM( songid ) {
+	console.log("因为没钱，所以放不了，要不你自己去官网开会员听？");
+	if ( confirm( "因为没钱，所以放不了，要不你自己去官网开会员听？" ) ){
+		window.open( 'https://music.163.com/#/song?id=' + songid );
+		console.log("感谢你的理解！^_^");
+	} else {
+		console.log("好吧，那我也没有办法了，总之是放不了。\(sad")
+	}
+}
+
+// 初始化播放模式
+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();
 }