写一个MP3播放器（vuejs+nodejs+mongodb）_nodejs播放mp3-优快云博客

写一个MP3播放器（vue-cli+element ui+express+mongoose）

最近刚学完vuejs，为了增进理解就写了个MP3播放器（用到了vuex，vue-router,es6）。可上传歌曲歌词封面文件，可管理歌曲，可点击封面放大图片等
项目地址：https://github.com/variinlkt/MP3-vueplayer
项目截图：

项目还有很多不完善的地方，欢迎交流

在这里总结一下在练手时遇到的知识点:

html5的audio对象属性、方法、事件
图片旋转动画
黑胶背景
点击放大
歌词滚动逻辑
播放逻辑
切换歌曲逻辑
一些细枝末节
部署上线

一.html5的audio对象属性、方法、事件

了解html5中的audio对象是写好一个音频播放器的关键

1.属性

audioTracks 返回表示可用音频轨道的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频
controller 返回表示音频当前媒体控制器的MediaController 对象
controls 设置或返回音频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频的 CORS 设置
currentSrc 回当前音频的 URL
defaultMuted 设置或返回音频默认是否静音
defaultPlaybackRate 设置或返回音频的默认播放速度
duration 返回当前音频的长度（以秒计）
error 返回表示音频错误状态的 MediaError 对象
loop 设置或返回音频是否应在结束时重新播放
mediaGroup 设置或返回音频所属的组合（用于连接多个音频元素）
networkState 返回音频的当前网络状态
paused 设置或返回音频是否暂停
played 返回表示音频已播放部分的 TimeRanges 对象
preload 设置或返回音频是否应该在页面加载后进行加载
readyState 返回音频当前的就绪状态
seeking 返回用户是否正在音频中进行查找
src 设置或返回音频元素的当前来源
textTracks 返回表示可用文本轨道的 TextTrackList 对象
volume 设置或返回音频的音量

该项目用到的属性：
volume，crossOrigin,duration，src,currentTime,ended,loop
其中设置crossOrigin属性为“anonymous”，不设置就无法通过js来动态更改audio对象的src

2.方法

addTextTrack() 在音频中添加一个新的文本轨道
canPlayType() 检查浏览器是否可以播放指定的音频类型
fastSeek() 在音频播放器中指定播放时间。
getStartDate() 返回一个新的Date对象，表示当前时间轴偏移量
load() 重新加载音频元素
play() 开始播放音频
pause() 暂停当前播放的音频

这里用到load，play，pause

3.事件

当视频/音频（audio/video）已经加载后，视频/音频（audio/video）的时长从 “NaN” 修改为正在的时长。
在视频/音频（audio/video）加载过程中，事件的触发顺序如下:
onloadstart在浏览器开始寻找指定视频/音频（audio/video）触发。
ondurationchange在视频/音频（audio/video）的时长发生变化时触发。
onloadedmetadata在指定视频/音频（audio/video）的元数据加载后触发。
onloadeddata在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发。
onprogress在浏览器下载指定的视频/音频（audio/video）时触发。
oncanplay在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。

这里用到ondurationchange,用于切换歌曲时获取歌曲时长

二.图片旋转动画

这里可以看到：播放音乐时歌曲封面是随着歌曲播放而旋转的，播放暂停则暂停旋转
实现原理：css3的animation
html：

<div class="circle">
        <div class="circle-inside" :style="{backgroundImage: 'url('+cov+')',animationPlayState:ps?'running':'paused'}">
        </div>
</div>
//ps为当前的播放状况playstate

css：

.circle-inside{
  width: 100px;
  height: