一、功能描述

实现音乐播放器的部分基本功能，包括歌曲（歌手）搜索，播放/暂停音乐，播放/暂停mv，显示热门评论。

2. html代码

（语义化做的不好，在学了在学了）

<div id="container"><div id="top"><img src="data:images/netease.png"><input id="srchbar" type="text" v-model="ipt" @keyup.enter="srch"></div><div id="middle"><div id="left"><table><tr v-for="item in songsList"><td @dblclick="playMsc(item.id)"><img src="data:images/play.png" @click="playMsc(item.id)" id="mscIcon"><a id="songName">{{item.name}}</a><img src="data:images/play.jpg" v-show="item.mvid" @click="playMv(item.mvid)" id="mvIcon"></td></tr></table></div><div id="center"><img :src="imgSrc" id="alPic" :class="{playing:isPlaying,paused:isPaused}"></div><div id="right"><p v-show="cmtsList.length" style="font-weight: bold;">热门评论</p><ul id="cmts"><li v-for="item in cmtsList"><img :src="item.user.avatarUrl" id="userImg"><div id="usrCmts"><span style="font-weight: bold;">{{item.user.nickname}}</span><p>{{item.content}}</p></div></li></ul></div></div><div id="bottom"><audio :src="songSrc" controls autoplay @play="continueMsc" @pause="pauseMsc"></audio></div><div id="vdeo" v-show="isMvShow" @click="stopMv"><video :src="mvSrc" @click.stop="" controls autoplay></video></div></div>

3. js代码

var app = new Vue({el: "#container",data: {songsList: [],ipt: "",songSrc: "",imgSrc: "",mvSrc: "",cmtsList: [],isNewStart:false,isPlaying:false,isPaused:true,isMvShow:false},methods: {srch: function () {var that = this;axios.get("https://autumnfish.cn/search?keywords=" + that.ipt).then(function (message) {that.songsList = message.data.result.songs;});},playMsc: function (id) {var that = this;that.songSrc="";that.isPlaying=false;that.isPaused=false;axios.get("https://autumnfish.cn/song/url?id=" + id).then(function (message) {that.songSrc = message.data.data[0].url;});axios.get("https://autumnfish.cn/song/detail?ids=" + id).then(function (message) {that.imgSrc = message.data.songs[0].al.picUrl;});axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function (response) {that.cmtsList = response.data.hotComments;})},playMv: function (id) {var that = this;axios.get("https://autumnfish.cn/mv/url?id=" + id).then(function (response) {that.mvSrc = response.data.data.url;});that.mvPlaying=true;that.isMvShow=true;},stopMv:function(){this.isMvShow=false;this.mvSrc="";},continueMsc:function(){this.isPlaying=true;this.isPaused=false;},pauseMsc:function(){this.isPlaying=false;this.isPaused=true;}}
})

4. 结果示意

5. 问题及解决方法

5.1. 图片的src为空时，页面显示裂图及边框

网上搜索到了使用css来设置src为空或者错误时，将不透明度设置为0的方法，这里不明白的一点是为啥不能设置display: none？ 希望知道的大佬答疑解惑。
这里其实还有个更方便的办法，那就是v-show="imgSrc" ，当图片地址不为空时才显示。害，脑子抽风把刚学的Vue基本表达式给忘了。

5.2. 同一首歌在播放时实现重新播放

当播放音乐时，根据经验，再双击歌曲名称或者点击名称前面的播放按钮时，该首歌会从头开始播放。其实实现原理很简单，只需要将歌曲地址置空一下，再重新赋值就好了，即在点击播放函数里添加this.songSrc="" 。

5.3. 唱片旋转的若干问题

实现原理很简单，即在css中通过animation为唱片图片的类名分别绑定keyframes，通过类名的切换来实现ruuning和paused。但是在这个demo实现过程中也遇到了一些小问题。

5.3.1. 切歌后唱片角度恢复初始状态

需要为唱片图片添加一个除播放、暂停两个状态之外的状态，否则切歌后唱片虽然变了，但是还是接着刚才的角度继续旋转。我选择在点击播放函数中将类名清空，然后分别在两个类名中来定义animation，这样切歌后唱片图片与keyframe断开连接，唱片恢复原位；在播放之后自动将类名置为playing，唱片开始旋转。如下所示。

            <div id="center"><img :src="imgSrc" id="alPic" :class="{playing:isPlaying,paused:isPaused}"></div>

playMsc: function (id) {var that = this;that.songSrc="";/*将类名置空*/that.isPlaying=false;that.isPaused=false;axios.get("https://autumnfish.cn/song/url?id=" + id).then(function (message) {that.songSrc = message.data.data[0].url;});axios.get("https://autumnfish.cn/song/detail?ids=" + id).then(function (message) {that.imgSrc = message.data.songs[0].al.picUrl;});axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function (response) {that.cmtsList = response.data.hotComments;})}

#alPic.playing{animation: rtt 10s linear infinite normal;animation-play-state: running;animation-delay: 0.5s;
}
#alPic.paused{animation: rtt 10s linear infinite normal;animation-play-state: paused;animation-delay: 0.5s;
}
@keyframes rtt{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}

5.3.2. 暂停播放后唱片位置还原

正常情况下暂停播放后，唱片应该暂停在当前位置，但是我写完之后唱片位置总会还原。这是因为没有给暂停和播放类都绑定keyframe，这样两个状态的图片位置就不同步。由于上一个问题限制，不能为唱片图片统一添加animation属性，所以要分别绑定同一个keyframe以实现同步。
需要注意的是，在分别绑定keyframe时，像animation-delay这样的设置也必须相同，以保证两个状态下的图片完全一致。否则暂停时，唱片位置会按照paused中的delay来确定位置。

5.3.3. 点击遮罩层关闭MV

在上面的结果示意图中可以看到，MV播放时四周是由半透明的遮罩层的，点击即可关闭MV。我遇到的问题是，点击MV画面可以实现播放/暂停，但是MV也被关闭了。这是js向上冒泡的事件模型所导致的。而Vue中阻止冒泡的方法很简单，在video标签内添加@click.stop="" 即可。由于点击画面实现暂停和播放是内置功能，所以不必再另写@click方法来实现了。

5.4 双击歌曲名称不要选中文本

#songName{cursor: default;user-select: none;
}

6. 总结

作为Vue快速入门系列最后的综合应用练习，这个音乐播放器很好地用到了课程中所学的知识（v-if和v-html除外），相对来说还是比较简单的。上面遇到的这些问题大都是自己基础不够牢固，很多东西都忘了。前路漫漫，还需要努力努力再努力。

参考资料

https://blog.csdn.net/weixin_44307065/article/details/104149174
https://www.cnblogs.com/gaotenglong/p/5703177.html
https://www.cnblogs.com/liaoshiqi/p/5972325.html
https://blog.csdn.net/suncaishen/article/details/41348755

Vue实例练习——简易音乐播放器相关推荐

html实现简易音乐播放器
目标: 使用vue.js导包的形式做一个简单的音乐播放器,新手也很容易看懂. 内容: 1. 使用了flex实现响应式布局: 2. 使用min-width防止字体被压缩: 3. 使用computed计算 ...
JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
Android Studio简易音乐播放器设计作业
Android Studio简易音乐播放器设计作业实验成功展示实验代码 MainActivity.java XML文件 class文件利用BroadcastReceiver模拟音乐播放器,实现播 ...
单片机音乐播放器课程设计C语言,单片机课程设计简易音乐播放器
单片机课程设计简易音乐播放器论文题目:简易音乐播放器所属系部:电子工程系指导教师: 学生姓名: 学号: 专业: 电子信息工程技术题目: 简易音乐播放器任务与要求:本设计以 MCS-51 系列 ...
【毕业设计】28-基于单片机的音乐播放器简易音乐播放器设计（原理图+源代码+仿真工程+答辩PPT+答辩论文）
typora-root-url: ./ [毕业设计]28-基于单片机的音乐播放器简易音乐播放器设计(原理图+源代码+仿真工程+答辩PPT+答辩论文) 文章目录 typora-root-url: ./ ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
【微信小程序】简易音乐播放器，进度条拖拉、音乐的播放与暂停
小程序简易音乐播放器实现粗糙的页面设计: wxml部分: <view class="test"><view class="img">& ...
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署本源 ...

Vue实例练习——简易音乐播放器