如何检查是否加载了 HTML5 音频元素?

IT技术 javascript html5-audio
2021-02-24 08:53:54

我想知道如何检查是否加载了 HTML5 音频元素。

3个回答

要了解音频何时可以开始播放,请为oncanplayoncanplaythrough事件添加侦听器要了解音频何时完全加载,请收听onloadeddata事件

<audio oncanplay="myOnCanPlayFunction()"
       oncanplaythrough="myOnCanPlayThroughFunction()"
       onloadeddata="myOnLoadedData()"
       src="myaudio.ogg"
       controls>
    <a href="myaudio.ogg">Download</a>
</audio>

<script>
function myOnCanPlayFunction() { console.log('Can play'); }
function myOnCanPlayThroughFunction() { console.log('Can play through'); }
function myOnLoadedData() { console.log('Loaded data'); }
</script>
@makc 为什么你认为这会破坏这个答案?
2021-04-18 08:53:54
如果可以,您能否提供一个示例或解释侦听器以及如何实现它们。
2021-04-21 08:53:54
很抱歉破坏了这个已接受的答案,但loadeddata 事件显示“媒体的第一帧已完成加载”,即当时大部分文件未加载。
2021-04-22 08:53:54
是的,我发现我试图在 Javascript 而不是 DOM 中使用它。不过还是谢谢你。
2021-05-01 08:53:54
@auragar 侦听器是标准的 DOM/JavaScript 事物,只需在 google 上搜索“DOM 事件侦听器”。您如何实施它们取决于您希望它们做什么。
2021-05-08 08:53:54

查看 robertc 的答案以了解如何使用事件侦听器。您还可以直接检查音频元素的就绪状态:

var myAudio = $('audio')[0];

var readyState = myAudio.readyState;

readyState将是一个数字。来自Mozilla 的文档

  • 0 - 没有关于媒体资源的可用信息。
  • 1 - 已检索到足够的媒体资源以初始化元数据属性。寻求将不再引发异常。
  • 2 - 数据可用于当前播放位置,但不足以实际播放多于一帧。
  • 3 - 当前播放位置以及未来至少一小段时间的数据可用(换句话说,例如至少两帧视频)。
  • 4 - 有足够的数据可用——而且下载速率足够高——媒体可以不间断地播放到最后。

另一种选择是networkState

var myAudio = new Audio(url);
var networkState = myAudio.networkState;

networkState 是前面提到的 readyState 的有用伴随属性,并且在 readyState 可能不足的某些上下文中非常有用,例如辨别文件是否可能会加载。这可以通过按设定的时间间隔检查来完成。