Starlight-0208/WebPlayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Starlight_0208 2022-04-27 11:29:34 +08:00
parent 2f9fb26ee5
commit dd27daaccd
3 changed files with 440 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
css/style.css Normal file
View 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
View 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
View 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();
}