First Commit
This commit is contained in:
parent
2f9fb26ee5
commit
dd27daaccd
247
css/style.css
Normal file
247
css/style.css
Normal file
@ -0,0 +1,247 @@
|
||||
#search-song{
|
||||
outline-style: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 7px 0px;
|
||||
font-size: 16px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#search-song:focus{
|
||||
border-color: #66afe9;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
}
|
||||
|
||||
#reslist{
|
||||
padding: 10px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#reslist > li{
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#reslist > li:hover{
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#reslist > li > a{
|
||||
text-decoration: none;
|
||||
color: rgb(58, 124, 255);
|
||||
}
|
||||
|
||||
#searchbtn{
|
||||
background-color: #66afe9;
|
||||
border: 1px solid #66afe9;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#searchbtn:hover{
|
||||
background-color: #4da7fe;
|
||||
border: 1px solid #4da7fe;
|
||||
}
|
||||
|
||||
#playbtn{
|
||||
background-color: #66afe9;
|
||||
border: 1px solid #66afe9;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
#Player{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#Player > div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#nowplaystat{
|
||||
/*
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
*/
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
#nowplaystat > span{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#listitem{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#delbtn{
|
||||
background-color: #ff5050;
|
||||
border: 1px solid #ff5050;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
#nowplaystat{
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#nowplaystat > span{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#Player{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#Player > div{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#playbtn{
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#delbtn{
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#search-song{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reslist > li{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#reslist > li > a{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#searchbtn{
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
#listitem{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#listitem > a{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#listitem > a:hover{
|
||||
color: #4da7fe;
|
||||
}
|
||||
|
||||
#listitem > a > span{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#searchtext{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px){
|
||||
#nowplaystat{
|
||||
line-height: 30px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#nowplaystat > span{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#Player{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#Player > div{
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#delbtn{
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#playbtn{
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#search-song{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#reslist > li{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#reslist > li > a{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#searchbtn{
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
#listitem{
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
#nowplay{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#searchtext{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
h1{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
29
index.html
Normal file
29
index.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="js/main.js"></script>
|
||||
<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="search-result">
|
||||
<span id="searchtext">以下是查询 <span id="keyword">None</span> 的结果</span><br />
|
||||
<ul id="reslist"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
164
js/main.js
Normal file
164
js/main.js
Normal file
@ -0,0 +1,164 @@
|
||||
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();
|
||||
}
|
||||
|
||||
//队列
|
||||
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("音乐列表已经播放完毕了哦，快加入新的音乐吧~");
|
||||
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("音乐列表没有歌曲哦，快加入新的音乐吧~");
|
||||
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 = "当前播放列表";
|
||||
}
|
||||
|
||||
/*
|
||||
function RemoveItemFromList(songid){
|
||||
for(var i = 0; i < list.size(); i++){
|
||||
if(list.items[i].songid == songid){
|
||||
list.items.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
getplaylist();
|
||||
}
|
||||
*/
|
||||
|
||||
function RemoveItemFromListByID(uid){
|
||||
list.items.splice(uid, 1);
|
||||
getplaylist();
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user