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实现音乐播放及歌曲切换功能的方法及原理解释相关推荐

Vue2仿网易云风格音乐播放器（附源码）
Vue2仿网易云风格音乐播放器 1.整体效果 2.使用技术 3.实现内容 4.源码 5.使用图片 1.整体效果 2.使用技术使用了HTML5 + CSS3进行页面布局及美化使用Vue2进行数据渲染 ...
html防微信音乐,web高仿樊登H5/微信音乐播放悬浮球效果
这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果,这个效果跟微信音乐播放悬浮球的效果也很相似,今天总结一下实现的思路过程(基于 Vue 实现). 先来看看樊登 H5 的效果. 再来看看我的实现,挺完 ...
树莓派4B命令行安装网易云音乐播放在线歌曲
手把手教你在树莓派上配置网易云音乐播放在线歌曲 0 鸣谢首先鸣谢github上的开源贡献者ZHANG RT为我们开发如此优秀的脚本Free Free Free 感谢为MusicBox的开发付出过努力 ...
Vue2.0之H5元素Audio属性currentTime、duration应用
需求:正在做的项目是一个SPA音乐播放器,用到了H5新加入的audio标签,同时像主流播放器一样显示当前播放歌曲的秒数和总时间: 思路:查阅API文档得知需要用到audio.currentTime和a ...
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...
（1）H5实现音乐播放器【正在播放-歌词篇】
近期闲来无事,就想着复习一下前端的东西,然后正好跟朋友搞了一个公共开放的音乐api接口,就想着写一个音乐播放器玩玩! 话不多说,直接上图,然后上代码 [播放器显示正在播放] 实现功能: 1:歌词随着歌 ...
H5,Audio音乐播放器(移动版)
有些时候,总是感觉自己进步的没有以前快了.于是就怀疑自己是不是也被时间磨灭了,这可真是一件不幸的事儿.可能是自己会的东西太少了,总是有种莫名的危机感. 前一段时间,想写一个移动版音乐播放器,于是就开始 ...
VUE2.0搭建H5项目
1.搭建VUE2.0项目 vue create '项目名' 2.安装flexible插件(适配移动端插件) npm install lib-flexible -S 2.1 在main.js中引入fle ...
php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...

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

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

最新文章

热门文章