225 lines
7.2 KiB
JavaScript
225 lines
7.2 KiB
JavaScript
window.onload = function(){
|
||
createlist();
|
||
setInterval(checkplay, 3000);
|
||
}
|
||
|
||
// 搜索音乐
|
||
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){
|
||
//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>`;
|
||
}else{
|
||
reslist.innerHTML += `<li>[不支持播放]${list[i].name} - ${getArtist(list[i])}</li>`
|
||
}
|
||
}
|
||
}else{
|
||
//alert(xhr.statusText);
|
||
}
|
||
}
|
||
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);
|
||
}
|
||
|
||
// 队列 -- 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 createlist(){
|
||
// 构造队列
|
||
list = new Queue();
|
||
}
|
||
|
||
// 添加到播放列表
|
||
function addlist(songid, songname, artist){
|
||
list.nqueue({"songid":songid, "songname":songname, "artist":artist});
|
||
console.log(`${songname} - ${artist} 已被加入播放列表`);
|
||
}
|
||
|
||
// 播放下一首
|
||
function playnext(){
|
||
if(list.isEmpty()){
|
||
console.log("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
|
||
alert("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
|
||
return;
|
||
}
|
||
var next = list.dequeue();
|
||
playmusic(next.songid, next.songname, next.artist);
|
||
}
|
||
|
||
// 检测是否播放完毕
|
||
function checkplay(){
|
||
// 为了防止播放列表结束以后一直调用playnext产生过多的alart，所以需要检测播放列表是否为空
|
||
if(!list.isEmpty()){
|
||
if(document.getElementById("Player").ended){
|
||
// 播放完毕后自动播放下一首
|
||
playnext();
|
||
}
|
||
}else{
|
||
//clearInterval(checkplay);
|
||
}
|
||
}
|
||
|
||
// 播放列表
|
||
function playthelist(){
|
||
if(list.isEmpty()){
|
||
console.log("音乐列表没有歌曲哦，快加入新的音乐吧~");
|
||
alert("音乐列表没有歌曲哦，快加入新的音乐吧~");
|
||
return;
|
||
}
|
||
var next = list.dequeue();
|
||
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}`);
|
||
}
|
||
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);
|
||
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, "playtime":new Date().getTime()});
|
||
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}` +
|
||
`<button type="button" id="playbtn" onclick="addlist(${historyList[i].songid}, '${historyList[i].songname}', '${historyList[i].artist}')">加入播放列表</button></li>`;
|
||
}
|
||
document.getElementById('keyword').innerHTML = "历史记录";
|
||
}
|
||
|
||
// 清空历史记录 -- Writtrn By Copilot
|
||
function removehistory(){
|
||
localStorage.removeItem("historyList");
|
||
gethistory();
|
||
} |