Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释

最近在用mint-ui重写一个vue.js音乐App项目，做到播放器模块，感觉挺有意思，记录一下播放器歌曲播放及歌曲切换功能实现方法及原理。

先上一张运行效果图（歌词尚未抓取、播放进度条及时间尚未开发）

所需了解的知识：

vue2.0、vuex（mapGetters、mapMutations等）、H5 audio标签

关键DOM部分：

注：歌曲数据已经事先抓取，并通过vuex管理

实现方法：

使用HTML5的audio标签实现歌曲的播放，currentSong表示当前播放的歌曲，currentSong.url即当前歌曲所在的地址，点击

上一首/下一首触发prev()/next()方法，在对应方法中调用mapMutations映射的方法修改mapGetters获取的歌曲的索引值，从而实现歌曲的切换；

点击播放/暂停按钮触发togglePlaying()方法，在对应方法中调用mapMutations映射的方法修改mapGetters获取的当前歌曲的播放状态，从而实现

歌曲的播放与暂停。

以下只介绍播放及切换功能关键部分，布局样式不做介绍。

必需数据：

截图注释部分为必需数据，不注释部分仅用于控制UI相关，非功能必需：

mapMutations设置：

映射方法，便于在prev()、next()、togglePlaying()中调用，修改播放状态及当前歌曲索引

一、播放功能：

togglePlaying()播放/暂停方法及解释

解释：setPlayingState对应mapMutations中的setPlayingState方法，用于修改播放状态，转入的参数为布尔值，按当前播放状态取反，即可实现歌曲的播放与暂停。

二、歌曲切换功能：

上一首与下一首的方法相似，只是计算当前歌曲索引的方法不一样，因此只展示prev()方法源码

实现效果：

创作挑战赛新人创作奖励来咯，坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。