HTML5音频加载事件

Question

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

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

尝试添加这样的eventListener，但它似乎没有启动。

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

Answer 1

听起来你想要"canplaythrough"事件。当浏览器认为可以在不停止的情况下播放整个音频文件时，就会触发此项。

尝试：

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

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

1. 装载启动
2. 持续时间变化
3. 加载的元数据
4. 加载的数据
5. 进度
6. canplay
7. canplaythrough

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

Answer 2

音频标签的实现非常依赖于浏览器。它得到了支持，我想说它比视频标签还少，因为它是在史蒂夫·乔布斯关于Flash与HTML5圣战的演讲后炒作的，有趣的是，它最不受Safari的支持。视频标签（在事件处理程序上）工作得好，音频标签不工作，但状态仍然正确，这是真的。例如：

var a = new Audio();

• a.networkState和a.readyState-通过在计时器，你可以很容易地了解加载和播放进度

其他有趣的属性：

• seeking-如果UA当前正在查找，则为True
• seekable—可查找的TimeRange对象
• played-TimeRange已经播放了什么UA
• paused—如果播放暂停，则为True
• ended—如果播放结束，则为True
• currentTime-返回/设置播放位置（以秒为单位）
• duration

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

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

Answer 3

音频加载事件：（React）

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