说到今天这个课题之前，想先同步一个点，就是现在b站上会把一个大视频分为很多段。

这样就导致，

1 学习的获得感很强，能很清楚的确定一个视频的知识点

2 但相对的，也很难快速的整理一个系统性的知识

我今天分享的，和这个不直接相关，而是一个简单视频或者音频里，为了保证连续播放，手动分割的音频段，如何保证播放的序列性以及播放状态的同步。

首先，能确定的事，整体的状态，是基于第一个片段的开始，以及最后最后一个片段的播放结束。

但播放的实际开始，其实取决于audio或者video标签的播放事件，更加准确。

因此，我的设计要点分为两个大的方面。

一 播放状态的整体设计放在播放器。

其 收到第一个音频片段，认为是开始加载 ，状态1；

音频控件收到对应的播放事件，状态2 ；

收到播放序列管理器的调用，执行播放结束，状态3 ；

二 播放序列管理器

其是一个音频分割之后，管理序列的工具。

具体来说，其包括几个生命周期。

2.1 收到一个新的音频，重置，并分割得到新序列，进行初始化（状态1）

2.2 将序列中的第一个放到播放控件中（状态2）

2.3 订阅播放器的播放完成事件，将第二个地址同步给播放控件；直到最后一个；

2.4 当最后一个播放完成，发现没有新的片段需要播放时，调用播放器的状态改变，切换播放器的状态为状态3，自己也进入（状态3）

2.5 任何时候，如果收到新的音频，都将重置，并分割得到新序列（重新进入状态1）

之所以播放器和播放序列分开管理是因为两者对外部的影响不同。

比如对于业务，其只关心整个音频是否加载完。

而对于序列管理器，其只关心自己的序列是否正确，是否将正确的片段传给了播放器，以及是否订阅了节点事件来保证序列顺序和节点的正确性。

拓展：如果哪天，我们需要支持暂停，或者支持指定节点的播放，那么道理也是一样的。需要明确的把播放，和播放列表明确的分开，并通过合适的订阅或者事件机制关联起来。

前端笔记999篇持续更新中，欢迎订阅。 链接