javascript - 用于单个页面上单个音频元素的 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 .