【HTML+js 简易的音乐播放器】(补充：可手动控制的自动连播功能)

1. 补充描述

有很多朋友昨天看了笔者的博客在问关于自动连播的问题，我想读者们应该都是看到了笔者引用的B站播放器存在可手动控制的自动连播功能，觉得要是可以自己手动控制顺序播放就好了，其实这个方法并没有你们想象的那么困难。

2. 代码及原理

（1）补充checkbox控件用以打开/关闭自动连播功能

在页面内添加一个button标签即可

<input type="checkbox" id="retr_ck">自动连播</button>

页面看起来就是这样：

（2）原理解释及代码实现

因为是在页面加载完全后才会调用，依旧要时装一个方法，上一篇博客，笔者已经提到过将audio的ended事件制作成监听器放置于ajax请求回调的complete方法当中，现在我们需要一个独立的方法来承载这个监听器，然后将其与这个checkbox绑定，当点击此checkbox且确认其值为真时，就为页面增加事件监听器，反之，把这个监听器通过removeEventListener方法溢出就可以了。代码如下：

手动控制是否进行自动播放的方法：

function musicRetr() {
	if ($("#retr_ck").prop("checked")) {
		audio.addEventListener("ended", next, false);
	} else {
		audio.removeEventListener("ended", next, false);
	}
}

为控件绑定该事件：

<input type="checkbox" id="retr_ck" onclick="musicRetr();">自动连播</button>

3. 对B站播放列表的进一步说明（笔者自己的推测）

这里笔者就不在引用上面的那张图片了，以笔者的技术和能力来看，B站的合集视频播放页面都有相同的模板，尚不确定是否是.asp的子母版页编程技巧。在笔者的能力范围内，我认为这种方式是最方便的，因为除了视频标题和多半是从数据库直接pick的评论区，其大部分内容都相似，而且几乎不需要替换，播放列表和固定UI直接沿用就行，相关视频列表随机更新，保证方法正常执行就可以了，只需要动态地加载评论区和标题。
超链接看似跳转，实际应该是请求视频的接口，然后再重定向到子版页。有的读者会疑惑，为什么不像笔者那样动态更新？实际上，在笔者的第一篇博客SSI技术相关讨论的内容中就有所提及，对单个页面进行动态部分更新实际上会给这个页面本身带来一定的负荷，而直接替换页面则有助于减小服务器的负担，况且，B站的服务器那么大一“坨”，就算机房起火了也没那么大的问题。

从这个URL也看得出来，这个页面并非RESTAPI风格的接口，其附带了一串类似于IP地址和某个源的query，不过笔者也非B站技术人员，只是觉得有趣所以随便看看罢了，我也不知道这俩query到底有什么用，但至少可以猜出和重定向有关。对B站播放列表讨论就止于此，笔者不再带着大家钻牛角尖了，传统技术，点到为止，在进行下去还不得把人家的源码扒出来？

结语

本博客为笔者原创，如需转载请注明出处，欢迎援引和使用资源，侵权必究~