vue.js音乐播放器
// music.html
<!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="../vue.js"></script>
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script src="../js/axios.min.js"></script>
</head>
<body>
<div class="wrap">
<!--搜索区域-->
<div class="search_bar" id="player">
<!--搜索歌曲-->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searhMusic">
<div>
<ul>
<div style="float: left;margin:20px;">
<li v-for="(item,idex) in music">
<span>{{idex+1}}</span>
{{item.name}}
<a href="javascript:;" @click="playMusic(item.id,item.name)">播放</a>
</li>
</div>
<div style="float: left;margin:20px;">
<img v-bind:src="musicCover" width="260px" height="260px" v-show="flag">
<span><p>播放:{{musicName}}</p></span>
<audio ref="audio" v-bind:src="musicUrl" controls autoplay loop class="myaudio"> </audio>
</div>
</ul>
</div>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
// js 文件
/*
歌曲搜索接口
请求地址:https://autumnfish.cn/search
请求方式:get
请求关键字:keywords
相应内容
获取歌曲地址
https://autumnfish.cn/song/url
//获取歌曲详情
https://autumnfish.cn/song/detail
*/
var vu=new Vue({
el:"#player",
data:{
query:"",
music:[],
musicUrl:"",
musicName:"",
musicCover:"",
flag:false
},
methods:{
searhMusic:function(){
var that=this;
axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(res){
console.log(res);
if(res.data.result !=null){
that.music=res.data.result.songs
}
console.log(that.music)
},
function(err){
}
)
},
//歌曲播放
playMusic:function(id,name){
this.musicName=name;
var that=this;
this.flag=true;
axios.get("https://autumnfish.cn/song/url?id="+id).then(function(res){
console.log("音乐播放路径")
console.log(res)
that.musicUrl=res.data.data[0].url;
},
function(err){
}
)
//歌曲详情获取
axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(res){
console.log("获取歌曲详情");
console.log(res);
console.log(res.data.songs[0].al.picUrl);
that.musicCover=res.data.songs[0].al.picUrl;
},function(err){
})
}
}
})
