javascript HTML5 音频加载事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9337300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 06:19:16  来源:igfitidea点击:

HTML5 Audio Load Event?

javascripthtmlaudio

提问by user781657

Is there a load event that fires when an audio has finished loading? I am creating an audio element like so.

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

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

Tried adding an eventListener like so but it does not seem to fire.

尝试添加一个这样的事件监听器,但它似乎没有触发。

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

回答by jaybee

It sounds like you want the "canplaythrough" event. This fires when the browser thinks it can play the whole audio file without stopping.

听起来您想要“ canplaythrough”事件。当浏览器认为它可以不间断地播放整个音频文件时会触发。

Try:

尝试:

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

There are 7 events that fire in this order when an audio file is loaded:

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

  1. loadstart
  2. durationchange
  3. loadedmetadata
  4. loadeddata
  5. progress
  6. canplay
  7. canplaythrough
  1. 加载启动
  2. 持续时间变化
  3. 加载元数据
  4. 加载数据
  5. 进步
  6. 可以玩
  7. 可通关

Please note this is not supported in Internet Explorer versions before 9.

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

回答by Boris Ivanov

Audio tag implementation very depends on Browser. Its supported I would say less than video tag as it was in hype after Steve Jobs speech on Flash vs HTML5 holy war, funny enough it is least supported by Safari. And its true whats working well for Video tag (on Event handler) not working for Audio tag, but what good that Statuses are still correct. For example :

音频标签的实现非常依赖于浏览器。它的支持我会说比视频标签少,因为它在史蒂夫乔布斯关于 Flash 与 HTML5 圣战的演讲之后大肆宣传,有趣的是它是 Safari 最不支持的。它真正适用于视频标签(在事件处理程序上)不适用于音频标签,但状态仍然正确有什么好处。例如 :

var a = new Audio();
  • a.networkStateand a.readyState- by checking this every second on timer you can easily get idea about loading and playing progress.
  • a.networkState并且a.readyState- 通过在计时器上每秒检查一次,您可以轻松了解加载和播放进度。

Other interesting properties:

其他有趣的属性:

  • seeking- True if UA currently seeking
  • seekable- TimeRange object to which possible to seek.
  • played- TimeRangewhat UA has been played.
  • paused- True if playback paused.
  • ended- True if playback ended.
  • currentTime- Return/Set playback position in seconds.
  • duration
  • seeking- 如果 UA 当前正在寻找,则为真
  • seekable- 可能寻找的 TimeRange 对象。
  • played- TimeRangeUA 玩过什么。
  • paused- 如果播放暂停,则为真。
  • ended- 如果播放结束则为真。
  • currentTime- 以秒为单位返回/设置播放位置。
  • duration

Do not forget using canPlayType(type)- returns "probably"and "maybe"

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

Update: Consider looking at SoundManager2 - http://www.schillmania.com/projects/soundmanager2/

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