Question

音频加载后是否会触发加载事件？我正在创建一个像这样的音频元素。

var myAudio = new Audio("mySound.mp3");
myAudio.load();

尝试像这样添加一个eventListener，但它似乎没有触发。

myAudio.addEventListener("load",soundLoaded,false);

Answer 1

听起来你想要＆＃34; canplaythrough＆＃34;事件。当浏览器认为它可以播放整个音频文件而不停止时，它会触发。

尝试：

myAudio.addEventListener('canplaythrough', soundLoaded, false);

加载音频文件时，有7个事件按此顺序触发：

loadstart
durationchange
等待loadedmetadata
loadeddata
进步
canplay
canplaythrough

请注意，9之前的Internet Explorer版本不支持此功能。

Answer 2

音频标签的实现很大程度上取决于浏览器。它的支持我会说不像视频标签，因为它是在史蒂夫乔布斯关于Flash与HTML5神圣战争的演讲之后的炒作，有趣的是它最不受Safari的支持。它的真正适用于Video标签（在事件处理程序上）不适用于音频标签，但状态仍然是正确的。例如：

var a = new Audio();

a.networkState和a.readyState - 每隔一秒检查一次定时器，你可以轻松了解加载和播放进度。

其他有趣的属性：

seeking - 如果UA正在寻求
seekable - 可以寻找的TimeRange对象。
played - TimeRange播放了UA。
paused - 如果播放暂停，则为真。
ended - 如果播放结束则为真。
currentTime - 以秒为单位返回/设置播放位置。
duration

不要忘记使用canPlayType(type) - 返回"probably"和"maybe"

更新：考虑查看SoundManager2 - http://www.schillmania.com/projects/soundmanager2/

Answer 3

音频加载事件：（反应）

    <audio
        controls
        src={content.fullUrl}
        onCanPlay={() => setIsLoading(false)}
    >
        Your browser does not support the <code>audio</code> element.
    </audio>

HTML5音频加载事件？

3 个答案: