时间戳

首页 > 解决方案 > HTML5

javascript - HTML5

问题描述

我正在尝试向<audio>我的页面添加标签，并且担心音频加载。特别是关于较长的音频需要（相对）较长的时间来加载慢速互联网。

在查看了<audio>加载事件后，我发现canplay和canplaythrough. 事件触发后，canplaythrough我可以毫无问题地播放音频，但由于某种原因，我无法让它在canplay和canplaythrough事件之间播放，即使它应该可以工作。

如何让音频在之后canplay但之前开始播放canplaythrough？

我也对非本地解决方案（第 3 方 JS 库）持开放态度，以启用这种分块播放（在完全加载之前播放）。

编辑：事实证明这只发生在 Safari 中，尽管我仍在寻找潜在的解决方案。

（在 Safari 12.1.2 (14607.3.9)、 Firefox69.0和 Chrome中测试76.0.3809.132，都在 macOS 上运行10.14.6 (18G87)）

例子：

<audio id="audioElement" src="audio.mp3" preload="none" />

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", () => {
    console.log('document.DOMContentLoaded');

    const audioElement = document.getElementById('audioElement');

    audioElement.addEventListener('canplay', () => {
      console.log('audioElement.canplay');
      audioElement.play();
    });
    audioElement.addEventListener('canplaythrough', () => {
      console.log('audioElement.canplaythrough');
    });

    audioElement.addEventListener('play', () => {
      console.log('audioElement.play');
    });
    audioElement.addEventListener('playing', () => {
      console.log('audioElement.playing');
    });
    audioElement.addEventListener('timeupdate', (e) => {
      console.log('audioElement.timeupdate', audioElement.currentTime);
    });

    console.log('Loading...')
    audioElement.load();
  });
</script>

输出：

> audioElement.canplay
> audioElement.play
> audioElement.playing
> audioElement.timeupdate – 0

[ pause of about 5-10 seconds ]

> audioElement.canplaythrough

[ audio actually starts playing ]

> audioElement.timeupdate – 0.135390108
> audioElement.timeupdate – 0.385407534
> audioElement.timeupdate – 0.636663779
> audioElement.timeupdate – 0.887541244
> audioElement.timeupdate – 1.137894301
> audioElement.timeupdate – 1.388934644
> audioElement.timeupdate – 1.64044203
> audioElement.timeupdate – 1.894268825
> audioElement.timeupdate – 2.139506962

标签： javascripthtmlaudiosafaridom-events

解决方案

推荐阅读