综合项目_音乐播放器

<!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;//保留请求前的thisaxios.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>
综合项目_音乐播放器

相关文章

Dlna音乐播放器

乐

音乐播放器（OC）

MusicPlayer音乐播放器Android

乐乐音乐播放器欢迎页面(二)

乐乐音乐播放器

乐乐音乐播放器使用

乐乐音乐3.0
