Vue 综合应用 -网页音乐播放器
综合应用 - 悦听player 案例
使用 Vue 框架 + axios + api ，开发一个简易的网页音乐播放器
网易云免费歌曲接口：
-
地址：
https://autumnfish.cn/search -
方法：
GET -
参数：
keywords查询关键字 -
响应：歌曲搜索结果 （ 包含要使用的
歌曲 id、mvid） -
-
地址：
https://autumnfish.cn/song/url -
方法：
GET -
参数：
id歌曲id，可以从 api 1 中获取 -
响应：歌曲url地址
-
地址：
https://autumnfish.cn/song/detail -
方法：
GET -
参数：
ids歌曲id，可以从 api 1 中获取 -
响应：歌曲详情 (包括封面信息)
-
地址：
https://autumnfish.cn/comment/hot?type=0 -
方法：
GET -
参数：
id(歌曲 id , 地址中的type 固定为 0) 可以从 api 1 中获取 -
响应：歌曲的热门评论
-
地址：
https://autumnfish.cn/mv/url -
方法：
GET -
参数：
id( mvid , 为 0 表示没有mv) 可以从 api 1 中获取 -
响应：mv 的地址
成品效果
引入 Vue 、 axios
- 这里使用的是本地的 Vue.js，下载地址：https://v1-cn.vuejs.org/guide/installation.html
<script src="../../../dist/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
静态资源
分析结构
1. 基本容器、实例
html 代码
<div class="wrap"><div class="play_wrap" id="player">div>
div>
javascript 代码
// 创建 Vue 实例
new Vue({el:"#player",data:{},methods:{}
})
2. 搜索界面
html 代码
- +
@keyup.enter="searchMusic"enter 键抬起，调用搜索方法 - +
v-model="query"获取用户输入
<div class="search_bar"><img src="images/player_title.png" alt="logo" /><input @keyup.enter="searchMusic" type="text" autofocus autocomplete="off" v-model="query" />
div>
javascript 代码
- +
query保存用户输入 - +
musicList:[]保存歌曲列表 - +
searchMusic: function (){}搜索功能函数
// Vue 实例
new Vue({el:"#player",data:{query:"",musicList:[]},methods:{// 搜索功能searchMusic: function (){if (this.query.trim() === "") return;let self = this;// 搜索歌曲 返回歌曲数据axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(res => self.musicList = res.data.result.songs).catch(err => console.error(err))}}
})
3. 内容界面
html 代码
<div class="center_con">
div>
- +
v-for="(item, index) in musicList"生成歌曲列表结构 - +
@click="playMusic(item.id)"播放歌曲按钮 - +
{{item.name}}展示歌曲名称 - +
v-if="item.mvid!=0" @click="playMv(item.mvid)"显示和隐藏 MV 按钮、播放 MV
html 代码
<div class='song_wrapper'><ul class="song_list"><li v-for="(item, index) 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="1">
div>
javascript 代码
- +
playMusic: function (musicId){}播放歌曲功能 - +
playMv: function (mvid){}播放歌曲 MV 功能 - +
musicUrl保存歌曲 url - +
musicCover保存歌曲封面 url - +
hotComments: []保存热门评论数组 - +
mvUrl保存歌曲MV url - +
isPlaying音频播放状态 - +
isMaskMV 视频遮罩状态
new Vue({el:"#player",data:{query:"",musicList:[],musicUrl:"",musicCover:"",hotComments:"",mvUrl: "",isPlaying: false,isMask: false,},methods:{// 搜索searchMusic: function (){if (this.query.trim() === "") return;let self = this;// 搜索歌曲 返回歌曲数据axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(res => self.musicList = res.data.result.songs).catch(err => console.error(err))},// 播放歌曲playMusic: function (musicId){let self = this;// 1. 获取歌曲 urlaxios.get(`https://autumnfish.cn/song/url?id=${musicId}`).then(res => self.musicUrl = res.data.data[0].url).catch(err => console.error(err))// 2. 歌曲详情，获取歌曲封面urlaxios.get(`https://autumnfish.cn/song/detail?ids=${musicId}`).then(res => self.musicCover = res.data.songs[0].al.picUrl).catch(err => console.error(err))// 3. 获取歌曲评论axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${musicId}`).then(res => self.hotComments = res.data.hotComments).catch(err => console.error(err))},// 播放MVplayMv: function (mvid){axios.get(`https://autumnfish.cn/mv/url?id=${mvid}`).then(res =>{// 显示视频遮罩this.isMask = true;// 获取 mv urlthis.mvUrl = res.data.data.url;}).catch(err => console.error(err))}, }
})
歌曲信息、封面
html 代码
- +
:class="{playing:isPlaying}"绑定 class=“playing” 属性，有没有值取决于 isPlaying - +
:src="musicCover"歌曲封面
<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>
热门、评论容器
- +
v-for="(item, index) in hotComments"热门评论列表 - +
:src="item.user.avatarUrl"用户头像 - +
{{item.user.nickname}}用户昵称 - +
{{item.content}}评论内容
<div class="comment_wrapper"><h5 class='title'>热门留言h5><div class='comment_list'><dl v-for="(item, index) in hotComments"><dt><img :src="item.user.avatarUrl" alt="user">dt><dd class="name">{{item.user.nickname}}dd><dd class="detail">{{item.content}}dd>dl>div><img src="images/line.png" class="right_line">
div>
4. 歌曲播放界面
- +
:src="musicUrl"绑定歌曲 url - +
@play="play"绑定 audio 播放事件（碟片开始旋转） - +
@pause="pause""绑定 audio 暂停事件（碟片停止旋转）
html
<div class="audio_con"><audio ref='audio' :src="musicUrl" @play="play" @pause="pause" autoplay controls loop class="myaudio">audio>
div>
javascript （完整）
- +
play: function (){}音乐开始播放时 - +
pause: function (){}音乐暂停时 - +
hide: function (){}隐藏MV视频遮罩
// Vue 实例
new Vue({el:"#player",data:{query:"", // 用户输入，搜索musicList:[], // 每次搜索返回的歌曲数组musicUrl:"", // 歌曲的 URL 地址musicCover:"", // 歌曲的 URL 封面hotComments:"", // 一个歌曲的热门评论数组mvUrl: "", // MV 视频的 URL 地址isPlaying: false, // 音乐播放的状态isMask: false, // MV 视频的遮罩状态},methods:{// 搜索功能searchMusic: function (){ if (this.query.trim() === "") return;let self = this;// 搜索歌曲 => 返回歌曲数据axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(res => self.musicList = res.data.result.songs).catch(err => console.error(err))},// 播放歌曲功能playMusic: function (musicId){let self = this;// 1. 获取歌曲 url axios.get(`https://autumnfish.cn/song/url?id=${musicId}`).then(res => self.musicUrl = res.data.data[0].url).catch(err => console.error(err))// 2. 歌曲详情，获取歌曲封面 urlaxios.get(`https://autumnfish.cn/song/detail?ids=${musicId}`).then(res => self.musicCover = res.data.songs[0].al.picUrl).catch(err => console.error(err))// 3. 热门评论获取axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${musicId}`).then(res => self.hotComments = res.data.hotComments).catch(err => console.error(err))},// 播放 MV 功能playMv: function (mvid){axios.get(`https://autumnfish.cn/mv/url?id=${mvid}`).then(res =>{// 显示视频遮罩this.isMask = true;// 获取 mv urlthis.mvUrl = res.data.data.url;}).catch(err => console.error(err)).finally(() => document.querySelector("video").play())},// 播放play: function (){ this.isPlaying = true;},// 暂停pause: function (){ this.isPlaying = false;},// 隐藏遮罩hide: function (){this.isMask = false;document.querySelector("video").pause();},}
})
5. MV 播放界面
- +
v-show="isMask"显示、隐藏遮罩 - +
:src="mvUrl"MV 视频 url - +
@click="hide"点击，隐藏遮罩
html
<div class="video_con" style="display: none;" v-show="isMask"><video :src="mvUrl" controls="controls">video><div class="mask" @click="hide">div>
div>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！