Vue网络应用——音乐播放器

Vue网络应用学习——音乐播放器

【关键词】vue、axios
功能：搜索歌曲或歌手、播放音乐、播放mv
GitHub项目网址：GitHub项目链接
获取接口方法
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的地址

整体分为上、中、下三个区域。上面搜索框实现歌曲搜索功能。中间定义三个盒子，第一个显示搜索结果，第二个显示获取到的专辑图片，第三个显示获取到的评论。最底下的是歌曲进度条。利用v-model实现双向绑定数据，v-on实现搜索歌曲功能，v-for根据数据生成列表。

歌曲信息显示区域做了一个视频图标，用v-if判断是否能获取到歌曲同时获取到mv，如果获取到mv图标就会出现，点击图标会弹出窗口播放mv。再点击窗口其他区域，就会自动退出。

HTML代码

<div class="wrap"><!-- 播放器主体区域 --><div class="play_wrap" id="player"><div class="search_bar"><img src="images/player_title.png" alt="" width="150dp" height="50dp"/><!-- 搜索歌曲 --><input type="text"  v-model="music" @keyup.enter="searchMusic" autocomplete="off" /></div><div class="center_con"><!-- 搜索歌曲列表 --><div class='song_wrapper'><ul class="song_list"><li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a> <b> {{ item.name }} </b><span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span></li></ul><img src="images/line.png" class="switch_btn" alt=""></div><!-- 歌曲信息容器 --><div class="player_con" :class="{playing:isPlaying}"><img src="images/player_bar.png" class="play_bar" /><!-- 黑胶碟片 --><img src="images/disc.png" class="disc autoRotate" /><img :src="musiccover" class="cover autoRotate" /></div><!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in musiccomment"><dt :src="item.user.avatarUrl"></dt><dd class="name">{{ item.nickname }}</dd><dd class="detail">{{ item.content }}</dd></dl></div><img src="images/line.png" class="right_line"></div></div><div class="audio_con"><audio ref='audio' @play="play" @pause="pause" :src="musicurl" controls autoplay loop class="myaudio"></audio></div><div class="video_con" v-show="isShow" style="display: none;"><video controls="controls" :src="mvUrl"></video><div class="mask" @click="exit"></div></div></div></div>

js代码

var app = new Vue({el:"#player",data:{music:'',musicList:[],musicurl:"",musiccover:"",musiccomment:[],isPlaying:false,isShow:false,mvUrl:""},methods:{searchMusic:function(){//console.log(this.music);var that = this;axios.get('https://autumnfish.cn/search?keywords='+this.music).then(function(response){//console.log(response);that.musicList = response.data.result.songs;},function(err){})},playMusic:function(musicId){var that=this;axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(response){//console.log(response.response.data.data[0].url)that.musicurl=response.data.data[0].url;},function(err){})axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function(response){console.log(response);that.musiccover=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);that.musiccomment = response.data.hotComments;//console.log(response.data.hotComments[0].user.avatarUrl);},function(err){})},play:function(){//console.log("play");this.isPlaying=true;},pause:function(){// console.log("pause");this.isPlaying=false;},playMv:function(mvid){var that=this;axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(response){//console.log(response);that.isShow=true;that.mvUrl=response.data.data.url;},function(err){})},exit:function(){this.isShow=false;}}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！