全面的 html5 音频 API

Posted 2023-02-25

【中文标题】全面的 html5 音频 API

【英文标题】：Comprehensive html5 Audio API

【发布时间】：2011-12-02 15:29:16

【问题描述】：

对于我的一生，我找不到所有 html5 <audio> 事件和属性的完整列表（尽管我相信它们可能因浏览器而异）。我的很多谷歌搜索都有网站谈论“使用 javascript 音频 api”或“使用 javascript 音频 api”等，并展示了几个示例，但我没有找到方法列表或它们的作用。

例如，

var a = document.getElementById('audio');
a.ended = function ()  alert('foo!'); ; //FAIL
a.onended = function ()  alert('foo!'); ; //FAIL
a.addEventListener('ended', function ()  alert('foo!'); ; //PASS
a.addEventListener('play', function ()  alert('foo!'); ;

为什么没有onended？为什么叫play 而不是played？这些东西并不直观，因此 API 的实际列表会很有帮助。

另外，有些浏览器不尊重上述属性吗？我的黑莓手机和 mobile-ie9 不会在活动结束时发出警报，但 chrome、ffx 和 ipad-safari 都会发出警报。

【问题讨论】：

对 HTML 5 的支持仍然普遍很糟糕，而且 IE 并不是因为与标准配合得很好而臭名昭著。可以在here 中找到媒体对象的新 HTML 5 事件处理程序列表，但我预计至少一两年内不会得到广泛的支持。

<audio> 元素及其 JavaScript API 相对较新。支持可能会在一段时间内发生变化。

【参考方案1】：

HTML5 spec: the audio element When can I use... audio compatibility tables（以及指向外部资源的链接）

不幸的是，您亲身经历了there simply is no official JavaScript API for audio（尚未）的事实。

【参考方案2】：

正如您从 Matt 的精美 canIuse 链接中看到的那样

“对音频的一致跨浏览器支持目前是一团糟 HTML5 ...”

所以你应该看看 sound.js ;)

"... 但是 SoundJS 致力于抽象出问题并让 更容易为您的游戏或丰富体验添加声音。 "

--> Polyfill : SoundJS

【参考方案3】：

w3schools 有一个有用的音频/视频事件、属性和方法列表。虽然它没有解决跨浏览器的问题：

http://www.w3schools.com/tags/ref_av_dom.asp