音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）

播放模式有三种：

顺序播放

随机播放

单曲循环

定义为一个playMode对象并向外暴露，内含三种播放模式，即为：

export const playMode = {sequence: 0,loop: 1,random: 2
}

数据管理：

通过vuex提供的语法当mapGetters、mapMutations获取、映射方法设置播放模式、播放列表等的值。

样式层实现：

通过computed属性返回播放模式按钮的类，实现三种播放模式下的icon不同：

js逻辑实现：

上边dom结构已经定义了点击事件，对应的changePlayMode方法源码如下：

changePlayMode() {const mode = (this.mode + 1) % 3this.setPlayMode(mode)let list = null// 随机播放if (mode === playMode.random) {// 打乱播放列表list = randomSort(this.sequenceList)} else {// 顺序播放list = this.sequenceList}// 设置模式切换时当前歌曲不变this.resetCurrentIndex(list)// 设置播放列表this.setPlayList(list)},resetCurrentIndex(list) {let index = list.findIndex((item) => {return item.id === this.currentSong.id})this.setCurrentIndex(index)},

解释：

setPlayMode为mapMutations映射的方法，用于修改mode

sequenceList为顺序播放列表（接口返回的播放列表）

setCurrentIndex为mapMutations映射的方法，用于修改播放歌曲的索引，进而修改播放歌曲

setPlayList同样为mapMutations映射的方法，用于设置播放列表

顺序播放与单曲循环：

顺序播放只要按取得的播放列表播放即可，当audio播放完当前歌曲，会派发一个onended事件，监听此事件并调用播放下一首的方法即可。

单曲循环在audio派发onended事件时，重置audio的currentTime属性即可。

随机播放：将顺序播放列表打乱，随后逻辑跟顺序播放一致

本人写的比较简单的一个打乱数组的方法，即：randomSort()：

/*** Created by xiaoqiang on 17/01/2018.*/
export function randomSort(arr) {// 此处不用arr.slice()而使用arr的话会提示以下错误// Error: [vuex] Do not mutate vuex store state outside mutation handlers.// 数组按引用传递,因此在此修改了就相当于修改了原数组,解决方法为arr.slice(),相当于传入的是一个副本let array = arr.slice()array.sort(function () {return 0.5 - Math.random()})return array
}

顺序播放：

随机播放：

音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）相关推荐

Vue.js 运行原理解析、vue源码剖析
Vue.js 运行机制全局概览全局概览这一节笔者将为大家介绍一下 Vue.js 内部的整个流程,希望能让大家对全局有一个整体的印象,然后我们再来逐个模块进行讲解.从来没有了解过 Vue.js 实现 ...
二维码(QR code)原理解析
二维码(QR code)原理解析基于 <GB/T 18284-2000 快速响应矩阵码> 文章目录二维码(QR code)原理解析 1 模式 1.1 ECI 模式 1.2 数字模式 1 ...
Log4js原理解析
Log4js原理解析基于log4js 0.6.14版本 Log4js总共三篇博客 <Log4js原理解析>http://blog.csdn.net/hfty290/article/det ...
秋色园QBlog技术原理解析：性能优化篇：用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...
秋色园QBlog技术原理解析：性能优化篇：数据库文章表分表及分库减压方案(十五)...
文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文件的作用 2: 秋色园QBlog技术原理解析:认识整站处理流程(二) --介绍秋色园业务处理流程 3: 秋色 ...
clickhouse原理解析与应用实践_Hybrid App (混合应用) 技术全解析方案原理篇
引言随着 Web 技术和移动设备的快速发展,Hybrid 技术已经成为一种最主流最常见的方案.一套好的 Hybrid架构方案能让 App 既能拥有极致的体验和性能,同时也能拥有 Web技术灵活的 ...
秋色园QBlog技术原理解析：性能优化篇：access的并发极限及超级分库分散并发方案(十六)...
上节回顾: 上节秋色园QBlog技术原理解析:性能优化篇:数据库文章表分表及分库减压方案(十五) 中, 介绍了秋色园QBlog 在性能优化方面,从技术的优化手段,开始步入数据库设计优化,并从数据的 ...
android 屏幕录制方案,ShareREC for Android全系统录屏原理解析
本文是Mob开发者平台技术副总监余勋杰基于MediaProjection实现Android全系统录屏功能的原理解析,包括了结合MediaRecorder和MediaCodec两套方案. 文 / 余勋杰 ...
gRPC客户端创建和调用原理解析
1. gRPC客户端创建流程 1.1. 背景 gRPC是在HTTP/2之上实现的RPC框架,HTTP/2是第7层(应用层)协议,它运行在TCP(第4层 - 传输层)协议之上,相比于传统的REST/JS ...

音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）

音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）相关推荐

最新文章

热门文章