播放逻辑.md · 2020/prettymusic（Vue PC端音乐-视频平台 Music Video 播放器 Player）

#### 播放器组件关键业务逻辑
##### 三个列表
* 最近播放列表，称之为列表A
* 当前歌单列表，称之为列表B
* 播放列表，称之为列表C：隐性不可见，用于后台决定歌曲的播放顺序
****
##### 三个模式
1 列表循环
2 单曲循环
>单曲循环不做任何操作，则一直循环播放当前歌曲
>单曲循坏模式下，点击上一首或下一首是播放上一首或下一首

3 随机播放
>随机模式下，点击当前显示列表（列表A或列表B）歌曲前的播放按钮，都会把当前显示列表的数组打乱排序，再传入列表C，并找到该歌曲在乱序数组中的索引，并设置为当前播放索引。（因为当前播放歌曲是通过 arr[index] 获取，arr-列表C，index-当前播放索引）

4 另外

* 切换播放模式，都会将对应的数组重新传入列表
>列表循环、单曲循环都是将列表A或列表B的数组直接传入列表C（排序不变）

>随机模式是将列表A或列表B的数组打乱排序后传入
****
##### 最近播放列表点击全部删除按钮
* 最近播放列表会清空，但会将当前播放的歌曲直接传入列表C，（称该歌曲为歌曲A），避免播放器无信息显示（播放器的歌曲信息是通过列表C的每一个歌曲对象获取），用户体验不佳。例如：如果不传入歌曲A，则播放器的图片、歌名、时间都不能显示。
*  列表A清空后，数组长度为0，但列表C的数组长度为1，元素为歌曲A，播放器显示的是歌曲A
>**（1）当列表A为空数组时点击歌曲A播放或暂停按钮时，不会重新播放，也不会unshift到列表A，因为此时只是歌曲A播放与暂停切换。当列表A为空数组时点击上一首、下一首也是播放歌曲A。当列表A或列表B为空数组时，点击全部播放，不进行任何操作**

>**（2）当列表A清空后点击另外几首歌曲时，会把这些歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置当前播放索引**
>*  重复点击同一首歌曲，不会重新播放，因为重复点击是：播放->暂停->播放->...
>*  当前歌单列表（列表B）没有全部删除功能和删除单首歌曲功能
****
##### 删除单首歌曲
1. 删除的不是当前播放歌曲
>**找到该歌曲在列表A的索引，然后删除该元素，传入列表C**

2 .删除的是当前播放歌曲且当前播放歌曲是列表A仅有的一首歌
>**找到该歌曲在列表A的索引，然后删除该元素，将只包含当前歌曲的数组传入列表C，设置当前播放索引为0，因为当列表A为空数组时，列表C只需要这一首歌曲用来给播放器显示**

3. 删除的是当前播放歌曲，但当前播放歌曲不是列表A仅有的一首歌
>**找到该歌曲在列表A的索引，然后删除该元素，此时该歌曲仍然存在列表C并播放，在当前歌曲播放完成后，播放下一首之前，或者点击上一首或下一首时，根据播放模式排序后传入列表C，并将上述索引设置为当前索引。在列表循环和单曲循环模式下，下一首播放歌曲的索引即为被删除歌曲的索引，因此将该索引设置为当前播放索引。因为随机模式是乱序，对于下一首是随机，因此也可以直接将该索引设置为当前播放索引。如果没有下一首歌，直接设置当前索引为0。上一首播放歌曲的索引即为上述索引-1，如果超出范围，则设置为 列表C.length-1**
****
##### 上一首、下一首
> 若当前播放为列表C的第一首，点击上一首，则播放列表C的最后一首； 若当前播放为列表C的最后一首，点击下一首，则播放列表C的第一首

##### 点击列表A和列表B歌曲的播放按钮
> **将该歌曲升至列表A的第一位，即找到该歌曲在列表A的索引，删除自身，然后unshift到列表A第一位，然后根据播放模式，对列表A数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置当前播放索引**
* 最近播放列表和当前歌单的歌曲按列表C（任何模式）播放时，都不会将当前歌曲升至最近播放列表第一位，而是保持位置不变
* 列表A与列表B的区别之一：列表B不存在“提升歌曲”，列表A全部播放或上一首、下一首时也不会“提升歌曲”
* 当前歌单的歌曲的位置永远保持不变，除非更换歌单
****
##### 播放列表A没有的歌曲
* 例如点击首页、用户页面、歌单详情页面、当前歌单不存在于列表A的歌曲
>**把歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到这首歌曲在列表C的索引，设置当前播放索引。这一点与上述“<u>最近播放列表点击全部删除按钮</u>”的第（2）点一样**
****
##### 播放列表A已有的歌曲
>**找到该歌曲在列表A的索引，删除自身，再把这首歌曲unshift到列表A（保持在列表A的第一位），根据播放模式，对列表A数组进行排序再传入列表C，找到这首歌曲在列表C的索引，设置当前播放索引**
****
##### 全部播放
* 每次点击全部播放按钮，都会重新根据播放模式，对列表A或列表B数组进行排序再传入列表C，并设置当前播放索引为0，即播放列表C的第一首歌曲。如果在列表循环和单曲循环模式下播放第一首歌时，再点击全部播放，不会重新播放第一首歌

##### 切换播放模式和切换最近播放与当前歌单
* 每次切换，对列表A或列表B数组进行排序再传入列表C，找到当前播放歌曲在列表C的索引，设置为当前播放索引
* 切换最近播放与当前歌单：当点击全部删除后，列表A为空数组，而列表C为了播放器能够显示歌曲信息则会保留当前播放歌曲，所以当列表A数组为0时不能再传入列表C

##### 点击其他歌单的歌曲
- 将歌曲所在的歌单传入列表B。值得我们注意的是，当前播放的歌曲必定存在于列表B

---

#### 优化

本项目的播放器组件仍然存在对element-ui的el-slider（音量调节）、message（消息提示）组件、better-scroll插件（歌词滚动）和Vuex的依赖，不能完全作为独立于本项目的可复用的组件。而且，播放器组件结构过于臃肿，维护难度较大。为了日后能够应用于其它项目，播放器组件应该是尽可能独立且不依赖UI库。

优化：将播放器组件再度拆分优化，将进度条、音量调节、歌词和播放列表分别拆分成单个组件。

增加收藏歌曲到歌单功能，增加播放歌曲页面，增加电台页面...

#### 其余
因为是使用sessionStorage缓存数据，有大小限制，设置了列表A的最大长度为50，若超过则删除最后一个超出的元素

本项目算是中大型项目，在写项目的时候能感受到vue2.x的优点和不足。这里优点不多说，懂的都懂。说下其中一个不足：当一个组件比较庞大且变量较多时，对于反复用到的变量经常需要在Model、View、ViewModel三者之间打marks反复跳转，而不是在一个独立的代码块里专注于对该变量操作。不过这点不足，已经在vue3里得到改善。

2020/prettymusic（Vue PC端音乐-视频平台 Music Video 播放器 Player）

简介

发行版

贡献者

近期动态

2020/prettymusic（Vue PC端 音乐-视频平台 Music Video 播放器 Player） .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

2020/prettymusic（Vue PC端音乐-视频平台 Music Video 播放器 Player）