606 lines
17 KiB
JavaScript
606 lines
17 KiB
JavaScript
window.onload = function(){
|
||
createlist();
|
||
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();
|
||
}
|
||
|
||
// 搜索音乐
|
||
function getsongs(){
|
||
document.getElementById("reslist").innerHTML = "";
|
||
var search = document.getElementById("search-song");
|
||
var reslist = document.getElementById("reslist");
|
||
var urls = `http://150.158.7.169:3000/search?keywords=${search.value}`
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open("GET", urls);
|
||
xhr.send();
|
||
xhr.onreadystatechange = function(){
|
||
if(xhr.readyState == 4 && xhr.status == 200){
|
||
var obj = JSON.parse(xhr.responseText);
|
||
console.log(obj);
|
||
var list = obj.result.songs;
|
||
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="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 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{
|
||
console.warn("WARNNING：API服务器响应失败");
|
||
}
|
||
}
|
||
document.getElementById("keyword").innerHTML = search.value;
|
||
}
|
||
|
||
// 获取艺术家
|
||
function getArtist(obj){
|
||
var artiststr = "";
|
||
var artistd = obj.artists;
|
||
for(var i = 0; i < artistd.length; i++){
|
||
if(i != artistd.length - 1){
|
||
artiststr += artistd[i].name + "/";
|
||
}else{
|
||
artiststr += artistd[i].name;
|
||
}
|
||
}
|
||
return artiststr;
|
||
}
|
||
|
||
// 播放音乐
|
||
function playmusic(playid, songname, artist){
|
||
document.getElementById("nowplay").innerHTML = `${songname} - ${artist}`
|
||
url = `https://music.163.com/song/media/outer/url?id=${playid}.mp3`;
|
||
document.getElementById("Player").setAttribute('src',url);
|
||
// 选中后自动播放
|
||
document.getElementById("Player").play();
|
||
// 插入到历史记录
|
||
inserthistory(playid, songname, artist);
|
||
}
|
||
|
||
// 列表
|
||
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];
|
||
}
|
||
|
||
// CodeGeeX Written
|
||
List.prototype.locate = (items) => {
|
||
for(var i = 0; i < this.items.length; i++){
|
||
if(items == this.items[i]){
|
||
return i;
|
||
} else {
|
||
return undefined;
|
||
}
|
||
}
|
||
}
|
||
|
||
List.prototype.getLength = () => {
|
||
return this.items.length;
|
||
}
|
||
}
|
||
|
||
// 创建播放列表
|
||
function createlist(){
|
||
// 构造队列
|
||
// list = new Queue();
|
||
list = new List();
|
||
nowPlay = 0;
|
||
}
|
||
|
||
// 添加到播放列表
|
||
function addlist(songid, 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} 已被加入播放列表`);
|
||
}
|
||
|
||
// 播放下一首
|
||
function playnext(){
|
||
if(list.isEmpty()){
|
||
console.log("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
|
||
alert("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
|
||
return;
|
||
}
|
||
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 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;
|
||
}
|
||
}
|
||
|
||
// 播放列表
|
||
function playthelist(){
|
||
if(list.isEmpty()){
|
||
console.log("音乐列表没有歌曲哦，快加入新的音乐吧~");
|
||
alert("音乐列表没有歌曲哦，快加入新的音乐吧~");
|
||
return;
|
||
}
|
||
// var next = list.dequeue();
|
||
var next = list.getElem(0);
|
||
playmusic(next.songid, next.songname, next.artist);
|
||
}
|
||
|
||
// 获取播放列表
|
||
function getplaylist(){
|
||
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>`;
|
||
}
|
||
document.getElementById('keyword').innerHTML = "当前播放列表";
|
||
}
|
||
|
||
// 删除指定序号的音乐 -- Writtrn By Copilot
|
||
function RemoveItemFromListByID(uid){
|
||
list.items.splice(uid, 1);
|
||
getplaylist();
|
||
}
|
||
|
||
// 插入音乐到历史记录 -- Writtrn By Copilot
|
||
function inserthistory(songid, songname, artist){
|
||
// 从本地获取历史记录
|
||
var historyList = JSON.parse(localStorage.getItem("historyList"));
|
||
// 判断是否有历史记录
|
||
if(historyList == null){
|
||
historyList = []; // 创建一个空数组
|
||
}
|
||
var flag = false; // 标记是否已经存在
|
||
// 判断是否已经存在
|
||
for(var i = 0; i < historyList.length; i++){
|
||
// 如果已经存在，则更新播放时间
|
||
if(historyList[i].songid == songid){
|
||
flag = true;
|
||
break;
|
||
}
|
||
}
|
||
// 如果不存在，则插入
|
||
if(!flag){
|
||
historyList.push({"songid":songid, "songname":songname, "artist":artist});
|
||
}
|
||
// 存储到本地
|
||
localStorage.setItem("historyList", JSON.stringify(historyList));
|
||
}
|
||
|
||
// 获取历史记录 -- Writtrn By Copilot
|
||
function gethistory(){
|
||
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++){
|
||
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 = "历史记录";
|
||
}
|
||
|
||
// 清空历史记录 -- Writtrn By Copilot
|
||
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();
|
||
} |