单个页面上单个音频元素的 jQuery 预加载器

Question

我有一个将多个音频文件加载到文档中的单页应用程序。我创建了一个带有名为“.spinner”的类的预加载器微调器。在加载完成之前，我将如何为每个单独的音频元素显示这个预加载器微调器？

Answer 1

根据this和this在加载过程中发生以下事件，顺序如下：

1. loadstart - 开始加载媒体时发送。
2. durationchange - 元数据已加载或更改，表明媒体的持续时间发生了变化。例如，当媒体加载到足以知道持续时间时，就会发送此消息。
3. loadedmetadata - 媒体元数据已加载完毕；现在，所有属性都包含尽可能多的有用信息。
4. loadeddata - 媒体的第一帧已完成加载。
5. 进度 - 定期发送以通知感兴趣的各方下载媒体的进度。 media 元素的 buffered 属性中提供了有关当前已下载媒体数量的信息。
6. canplay - 当有足够的数据可以播放媒体时发送，至少可以播放几帧。
7. canplaythrough - 当就绪状态变为 CAN_PLAY_THROUGH 时发送，表示可以不间断地播放整个媒体，假设下载速率至少保持在当前水平。注意：手动设置 currentTime 最终会在 firefox 中触发一个 canplaythrough 事件。其他浏览器可能不会触发此事件。

所以看看这些事件，你可以玩其中的 2 个：loadstart 和 progress。或者，您可以使用音频元素的 duration 和 currentTime 属性，例如 here。