<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<style type="text/css">
@keyframes rotate{
0%{
transform: rotate(0);
}
50%{
transform:rotate(200deg);
}
100%{
transform: rotate(0);
}
}
.rotate{
transition: 0.5s;
transform-origin: 30px 30px;
animation: rotate 10s linear infinite; /*开始动画后无限循环,用来控制rotate*/
}
</style>
</head>
<body>
<div id="demo">
<input type="text" v-model="musicName" placeholder="请输入音乐名" @keyup.enter="selectMusic" />
<input type="button" value="查询" @click="selectMusic"/>
<audio v-bind:src="musicSrc" controls="controls" autoplay="autoplay" @play="play" @pause="pause"></audio>
<img v-bind:src="musicImg" width="100px" height="100px" v-show="musicImg != ''" v-bind:class="{rotate:playOrPause}"/>
<video id="mvshow" controls="controls" autoplay="autoplay" v-bind:src="mvSrc" v-if="mvShow"></video>
<div>
<span>歌曲评论</span>
<ul v-for="musicCommunity in musicCommunitys">
<li>
<img v-bind:src="musicCommunity.user.avatarUrl" width="20px" height="20px"/>
{{ musicCommunity.content }}
</li>
</ul>
</div>
<div>
<span>音乐列表</span>
<ul>
<li v-for="music in musics">
{{ music.name }}
<input type="button" value="播放" @click="beginMusic(music.id)">
<input type="button" value="mv视频" @click="playMvVideol(music.mvid)" v-if="music.mvid !=0" />
</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#demo",
data: {
musicName:"", //用于查询的歌曲名称
musics:"", //查询的歌曲信息
musicSrc:"", //歌曲播放路径
musicImg:"", //播放中歌曲的封面
musicCommunitys:"", //播放中歌曲的热评
playOrPause:false, //是否播放,用于判断图片是否旋转
mvSrc:"", //mv视频播放地址
mvShow:false //mv视频是否显示,用于退出mv视频
},methods:{
//查询歌曲属性
selectMusic:function(){
var now = this;//保留请求前的this
axios.get("https://autumnfish.cn/search?keywords="+this.musicName).then(
function(response){
//console.log(response);
now.musics = response.data.result.songs;
},function(err){
})
},
//获取歌曲的相关信息
beginMusic:function(musicId){
var now = this;//保留请求前的this
//获取歌曲播放链接
axios.get("https://autumnfish.cn/song/url?id="+musicId).then(
function(response){
//console.log(response);
now.musicSrc = response.data.data[0].url;
},function(err){
})
//获取歌曲封面
axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(
function(response){
//console.log(response);
now.musicImg = response.data.songs[0].al.picUrl;
},function(err){
})
//获取歌曲评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(
function(response){
console.log(response);
now.musicCommunitys = response.data.hotComments;
},function(err){
})
},
//控制封面旋转
play:function(){
this.playOrPause = true;
},
pause:function(){
this.playOrPause = false;
},
//播放mv视频
playMvVideol:function(mvid){
var now = this;
axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(
function(response){
//console.log(response);
now.mvShow = true;
now.mvSrc = response.data.data.url;
//console.log(now.mvSrc);
},function(err){
})
}
}
})
</script>
</body>
</html>
综合项目_音乐播放器
最新推荐文章于 2023-04-11 17:54:47 发布