加入了历史记录功能
This commit is contained in:
parent
3e376d94e9
commit
479990d58c
@ -48,6 +48,21 @@
|
||||
border: 1px solid #4da7fe;
|
||||
}
|
||||
|
||||
#btngreen{
|
||||
background-color: #ff6e06;
|
||||
border: 1px solid #ff6e06;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#btngreen:hover{
|
||||
background-color: #ffa632;
|
||||
border: 1px solid #ffa632;
|
||||
}
|
||||
|
||||
#playbtn{
|
||||
background-color: #66afe9;
|
||||
border: 1px solid #66afe9;
|
||||
@ -139,7 +154,7 @@
|
||||
}
|
||||
|
||||
#search-song{
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#reslist > li{
|
||||
@ -208,7 +223,7 @@
|
||||
}
|
||||
|
||||
#search-song{
|
||||
width: 100%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#reslist > li{
|
||||
|
||||
22
index.html
22
index.html
@ -9,17 +9,19 @@
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>This is a Player for 163 CloudMusic</h1>
|
||||
<div>
|
||||
<div id="nowplaystat">Now Playing: <span id="nowplay">None</span></div>
|
||||
<audio src="#" controls id="Player"></audio>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" id="search-song">
|
||||
<button type="button" onclick="getsongs()" id="searchbtn">搜索</button>
|
||||
<button type="button" onclick="getplaylist()" id="searchbtn">查看列表</button>
|
||||
<button type="button" onclick="playthelist()" id="searchbtn">播放列表</button>
|
||||
<button type="button" onclick="playnext()" id="searchbtn">立即切歌</button>
|
||||
<div id="searchbox">
|
||||
<input type="text" id="search-song">
|
||||
<button type="button" onclick="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>
|
||||
<div>
|
||||
<div id="nowplaystat">Now Playing: <span id="nowplay">None</span></div>
|
||||
<audio src="#" controls id="Player"></audio>
|
||||
</div>
|
||||
<div id="search-result">
|
||||
<span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br />
|
||||
<ul id="reslist"></ul>
|
||||
|
||||
70
js/main.js
70
js/main.js
@ -3,8 +3,7 @@ window.onload = function(){
|
||||
setInterval(checkplay, 3000);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 搜索音乐
|
||||
function getsongs(){
|
||||
document.getElementById("reslist").innerHTML = "";
|
||||
var search = document.getElementById("search-song");
|
||||
@ -38,6 +37,7 @@ function getsongs(){
|
||||
document.getElementById("keyword").innerHTML = search.value;
|
||||
}
|
||||
|
||||
// 获取艺术家
|
||||
function getArtist(obj){
|
||||
var artiststr = "";
|
||||
var artistd = obj.artists;
|
||||
@ -51,15 +51,18 @@ function getArtist(obj){
|
||||
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 = [];
|
||||
|
||||
@ -96,44 +99,48 @@ function Queue(){
|
||||
}
|
||||
}
|
||||
|
||||
//创建播放列表
|
||||
// 创建播放列表
|
||||
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(){
|
||||
if(document.getElementById("Player").ended){
|
||||
playnext();
|
||||
}
|
||||
}
|
||||
|
||||
// 播放列表
|
||||
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 = "";
|
||||
@ -146,7 +153,7 @@ function getplaylist(){
|
||||
document.getElementById('keyword').innerHTML = "当前播放列表";
|
||||
}
|
||||
|
||||
/*
|
||||
/* // -- Writtrn By Copilot
|
||||
function RemoveItemFromList(songid){
|
||||
for(var i = 0; i < list.size(); i++){
|
||||
if(list.items[i].songid == songid){
|
||||
@ -158,7 +165,54 @@ function RemoveItemFromList(songid){
|
||||
}
|
||||
*/
|
||||
|
||||
// 删除指定序号的音乐 -- 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}</li>`;
|
||||
}
|
||||
document.getElementById('keyword').innerHTML = "历史记录";
|
||||
}
|
||||
|
||||
// 清空历史记录 -- Writtrn By Copilot
|
||||
function removehistory(){
|
||||
localStorage.removeItem("historyList");
|
||||
gethistory();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user