通过vue与原生js实现音乐播放器
下面是需要的网址
1.歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方法:get
请求参数:keywords(查询关键字)
响应内容:歌曲搜索结果
2.歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<style>
body,ul,li,h3{
padding:0;
margin:0;
}
#app{
width: 900px;
margin: 30px auto 0 auto;
/*border: 1px solid red;*/
/*position: relative;*/
}
h1{
text-align: center;
color:red;
}
.search{
background-color: blue;
overflow: hidden;
height: 35px;
}
.search>h3{
float: left;
color: #fff;
line-height: 35px;
margin-left: 10px;
}
.search>.right{
position: relative;
width: 200px;
float: right;
border-radius: 8px;
background-color: #eee;
padding:0 10px;
margin-top: 6px;
margin-right: 10px;
}
.search>.right>input{
width:142px;
border: none;
outline: none;
background-color: transparent;
font-size: 12px;
}
.search>.right>button{
position: absolute;
border: none;
background-color: transparent;
font-size:12px;
padding-bottom:3px;
cursor: pointer;
}
.show{
height: 382px;
}
.show>.left{
width: 200px;
height: 374px;
padding-top:8px;
padding-left: 10px;
padding-right: 10px;
overflow:auto;
float: left;
}
ul{
list-style: none;
}
.show>.left>ul>li{
line-height: 24px;
border-bottom: 1px dashed #999;
font-size: 12px;
letter-spacing:-1.5px;
}
.show>.left>ul>li:hover{
background-color: orange !important;
}
.show>.left>ul>li:last-child{
border:none;
}
.show>.left>ul>li:nth-child(2n){
background-color: #E3FAFC;
}
.show>.left>ul>li>a{
display: inline-block;
margin-right:2px;
width:12px;
height:12px;
background-image: url("images/play.png");
background-size: 12px;
}
.show>.left>ul>li>img{
width: 12px;
height: 12px;
float: right;
margin-top: 6px;
cursor: pointer;
}
.show>.middle{
position: relative;
float: left;
width: 400px;
height: 382px;
background-color: #E8FCFC;
text-align: center;
}
.show>.middle>img{
position: absolute;
width:200px;
height:200px;
border-radius: 50%;
/* margin-top:50px;
margin-right: 20px; */
top:110px;
right: 100px;
}
.playing{
animation: rotate 8s linear infinite;
}
@keyframes rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
.show>.right{
position: relative;
float: right;
width: 280px;
height: 382px;
/*background-color: pink;*/
padding:5px 0px 5px 5px;
box-sizing: border-box;
overflow:auto;
}
.show>.right>h5{
margin:0;
text-align: center;
padding-bottom:3px;
}
.show>.right>ul>li{
padding:3px 0 10px 0;
border-top: 1px dashed #ccc;
}
.show>.right>ul>li>img{
width:40px;
height:40px;
border-radius: 50%;
float: left;
}
.show>.right>ul>li>p{
margin:0;
margin-left:45px;
font-size: 12px;
letter-spacing:-1.5px;
}
.show>.right>ul>li>p.name{
font-weight: bold;
}
audio{
width: 900px;
height: 34px;
}
div.video_dd{
width: 100%;
height:1500px;
padding-top: 30px;
position: absolute;
left:0;
top:0;
text-align: center;
background-color:rgba(0,0,0);
display: none;
}
video{
width: 900px;
height: 550px;
}
#lv{
font-size: 25px;
font-weight: 100;
}
</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="vue-2.7.14.js"></script>
<body>
<div id="app">
<h1>音乐播放器</h1>
<!-- 搜索歌曲 -->
<div class="search">
<h3>悦听</h3>
<div class="right" @keydown.enter="sousuo">
<input type="text" v-model="gequ">
<button type="button" @click="sousuo">搜索</button>
</div>
</div>
<!-- 歌曲信息 -->
<div class="show">
<!-- 歌曲名称 -->
<div class="left">
<ul>
<li v-for="(item,index) in name1">
<a href="javascript:;" @click="kais(musicurl[index],index)"></a>
<span>{{item}}-{{name2[index]}}</span>
<img src="images/film.png" alt="">
</li>
</ul>
</div>
<!-- 歌曲封面 -->
<div class="middle" >
<p id="lv" align="center">{{gename}}</p>
<img id="abc" :src="chushi" class="" alt="">
</div>
<!-- 歌曲评论 -->
<div class="right">
<h5>热门留言</h5>
<ul>
<li v-for="(item,index) in pinglun">
<img :src="pingluntou[index]" alt="">
<p class="name">{{pinglunname[index]}}</p>
<p>{{pinglun[index]}}</p>
</li>
</ul>
</div>
</div>
<!-- 播放按钮 -->
<audio :src="tes" id="audio" οnplay="f2()" οnpause="f3()" controls></audio>
<div class="video_dd" >
<video src="" controls autoplay loop></video>
</div>
</div>
<script>
// axios.defaults.baseURL="https://autumnfish.cn";
const vm=new Vue({
el:"#app",
data:{
window:window,
gequ:'周杰伦',
name1:[],
id1:[],
musicurl:[],
name2:[],
tes:'',
pinglun:[],
pingluntou:[],
pinglunname:[],
fengmian:[],
chushi:'images/wf.jpg',
play1:'',
gename:''
},
methods: {
sousuo:function(){
var t=this;
this.window.axios.get("https://autumnfish.cn/search?keywords=%27"+this.gequ+"%27").then(function(response)
{ t.name1.splice(0,t.name1.length)
t.id1.splice(0,t.id1.length)
t.musicurl.splice(0,t.musicurl.length)
t.name2.splice(0,t.name2.length)
t.fengmian.splice(0,t.fengmian.length)
// t.touids.splice(0,t.touids.length)
try{
var a=response.data.result.songs.length;
var b=response.data.result.songs;}
catch{return}
for(var i=0;i<a;i++){
t.name1.push(b[i].name);
t.id1.push(b[i].id);
if(b[i].artists[0].name=="")
t.name2.push("0")
else t.name2.push(b[i].artists[0].name)
}
var z=t.name1.length;
for(var i=0;i<z;i++)
{
// console.log(t.id1[i]);
t.window.axios.get("https://autumnfish.cn/song/url?id="+t.id1[i]).then(function(response){
if(response.data.data[0].url!=null)
t.musicurl.push(response.data.data[0].url)
else
t.musicurl.push('0');
})
}
for(var i=0;i<z;i++)
{
// console.log(t.id1[i]);
t.window.axios.get("https://autumnfish.cn/song/detail?ids="+t.id1[i]).then(function(response){
console.log(response);
if(response.data.songs[0].al.picUrl!=null)
t.fengmian.push(response.data.songs[0].al.picUrl)
else
t.fengmian.push('0');
})
}
});
}
,kais:function(a,b){
if(a=="0")
{
this.tes=""
this.pinglun.splice(0,this.pinglun.length)
this.pingluntou.splice(0,this.pingluntou.length)
this.pinglunname.splice(0,this.pinglunname.length)
this.window.document.querySelector('#abc').className =''
this.chushi='images/wf.jpg'
this.gename=''
alert("please change music")
return
}
var y=this;
this.tes=a;
this.window.axios.get("https://autumnfish.cn/comment/music?id="+this.id1[b]+"&limit=1").then(function(response){
console.log(response);
var x=response.data.hotComments.length
var z=response.data.hotComments;
y.pinglun.splice(0,y.pinglun.length)
y.pingluntou.splice(0,y.pingluntou.length)
y.pinglunname.splice(0,y.pinglunname.length)
for(var i=0;i<x;i++){
y.pinglun.push(z[i].content);
y.pingluntou.push(z[i].user.avatarUrl)
y.pinglunname.push(z[i].user.nickname)
}
})
this.gename =this.name1[b]
this.chushi=this.fengmian[b]
this.window.document.querySelector('#abc').className =''
}
},
go1:function(){
this.play1='playing'
document.querySelector('.playing').style.animationPlayState = ''
},
})
function f2(){
var tt=document.querySelector('#abc')
tt.className='playing'
tt.style.animationPlayState = ''
}
function f3(){
var tt=document.querySelector('#abc')
tt.className='playing'
tt.style.animationPlayState = 'paused'
}
</script>
</body>
</html>
