Making HTML5 Audio Ring True

转载 2012年03月25日 23:02:35

By Yves Van Goethem 


This is a guest post by Yves Van Goethem Tomas Senart , and Matas Petrikas of SoundCloud , the leading social sound sharing platform, and leaders in the use of HTML5 audio standards. In this post, he describes some of the issues that still surround HTML5 audio, and the creation of the AreWePlayingYet? test suite that helps raise awareness of these issues, and which forms an important part of Facebook's recently announced Ringmark mobile browser test suite.


A lot of developers would like to get the benefits of working with HTML5 audio. But, unfortunately, all of us - game developers, music services, journalists - are eventually going to find out that the HTML5 <audio> tag is not exactly ready to meet our expectations.


For SoundCloud, <audio> is business critical, so we recently launched an initiative called AreWePlayingYet? . Its purpose is to test HTML5 audio implementations pragmatically and help both developers and vendors to achieve better products. Think about it as an Acid test for audio; a way to judge which browsers do well - and which not so well - at supporting the <audio> tag.

When we launched the project, we were slightly surprised by the positive reaction it received from the browser vendors themselves. Right from the beginning, we had active involvement from Opera and Mozilla . Shortly afterwards, Webkit and Chrome paid attention too, and we're are also expecting the Internet Explorer team to join the discussion shortly. We've had contributions from outside of the browser vendors too - companies such as jPlayer and Ofmlabs .

The overall reactions were encouraging, so we knew that we had built something good!

So what's the problem with <audio>?

Don't get us wrong, HTML5 audio has a fantastic ambition. It strives to enable authors to publish sound content with Web standards, instead of with black-boxed and proprietary technologies like Flash.

Unfortunately, to date, the specification itself is less than optimal; it changes regularly and has many parts that are left open to interpretation.

This results in a lot of inconsistency across browsers and makes it quite complicated for any developer who wants to use <audio> to its fullest capabilities.

Take, for instance, the preload="metadata" attribute. The specification isn't clear enough about what its behaviour should be, and it differs on almost all browser implementations. We wrote a test for it that ensures what we consider should be the default behavior.


Another example is the order and frequency with which certain events are triggered on the audio object. Almost every browser fires them in a different order.

But testing specifications is just one part of the project. We also test for real-world issues we have encountered, as well as anything else we can think of. One of these pragmatic tests is to set a redirecting URL in the src attribute of the audio element. It turns out that that's not supported in some browsers, notably Android and IE Mobile.

Finally, we also test for codec support; we know there are ideological, strategic and financial issues to be considered by browser vendors when supporting different codecs. But as developers who have to work around these issues, what we feel is only pain!

AreWePlayingYet?

For now, AreWePlayingYet? acts as a communication channel between vendors and developers. Our main goal is to help browsers to achieve consistency in their implementations. It is also a valuable tool for web developers, as we link to specifications and to bugs on different trackers, and have set up a browser compatibility table for each of our tests.

The test suite is composed of several atomic tests for single units of functionality. Since there is no internal way of testing implementations, we had to build a solution for sandbox testing. As an example here is the test for the 'seekable ' property:

({
  name: 'property-seekable',
  description: 'Property "seekable"',
  spec: 'http://dev.w3.org/html5/spec/the-iframe-element.html#dom-media-seekable',
  assert: function(finish) {
    var audio = this.audio;

    audio.addEventListener('loadedmetadata', function() {
      finish(audio.seekable && audio.seekable.length);
    }, false);

    audio.src = AWPY.sound.mini.stream_url();
  }
})

Of course, a lot of the work involved in AreWePlayingYet? is writing tests like this, but that's not the whole story. We also write bug reports for the browsers which fail them. Almost all of them have their own bug-tracking systems: Firefox WebKit are both using Bugzilla, Chrome is using Google Code, Opera has a bug report wizard, and Internet Explorer includes bug report forms inside some builds of their browsers. There is even a tucked-away site where you can report back to Apple . By reporting back bugs directly to the vendors, we feel we are doing our part to help increase the overall quality of the Web.

Finally, we also think about what is missing from the specifications themselves. For now, we haven't proposed any changes, but there are some topics waiting in our issue tracker that we hope to submit. One example is the 'stop loading method ', similar to an equivalent method that Mozilla has already implemented - this reminds us that the specification is not the limit! Not everything has been thought about or specified yet, and by taking action, we think we can help bring <audio> to the next level.

Get involved!

Helping out with AreWePlayingYet? is easier than you think.

  • You can help us to write tests. The syntax is straight-forward, and you'll find everything you need to know in our readme .
  • You can report issues or suggestions to the project via our issue tracker .

If you have any thoughts about AreWePlayingYet? then please email us or drop us a comment below!

释放 HTML5 <audio> 的力量

作者:Giorgio Sardo | 高级技术推广师 – HTML5 和 Internet Explorer 各种声音构成了我们的生活背景。现在,HTML5 元素使 Web 开发人员可以将声音嵌入他...
  • hdchangchang
  • hdchangchang
  • 2013年12月24日 16:50
  • 8163

html5 audio音频播放全解析

html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash 意思是当你没有给浏览器...
  • px459
  • px459
  • 2016年07月17日 21:23
  • 2123

不同浏览器对于html5 audio标签和音频格式的兼容性

音频格式 Chrome Firefox IE9 Opera Safari OGG 支持 支持 支持 支持 不支持 MP3 支持 不支持 支持 不支持 支持 ...
  • qi1271199790
  • qi1271199790
  • 2017年01月09日 23:24
  • 2150

HTML5快速入门实例(六)audio元素静态加载和动态加载实例

例子一: 浏览器不支持audio元素
  • huiguimoyu
  • huiguimoyu
  • 2015年03月26日 15:31
  • 3145

html5 audio实现歌词同步

audio标签用于播放音频文件,很不幸,歌词文件并没有相应接口 addTextTrack() 向音频添加新的文本轨道。//各大浏览器都没有支持 有两种方法可以实现歌词同步: 1. 使用set...
  • mjiang1000
  • mjiang1000
  • 2015年09月11日 17:02
  • 2209

html5 audio 自定义播放器

自定义内容包括,播放,暂停,停止,上一首,下一首,进度条显示,进度条拖动并实时显示拖动位置 注:此代码因为有ajax跟服务器的通讯,所以是放在wampsever环境中运行,读者可以自行先替换默认播放的...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2015年09月07日 10:18
  • 769

HTML5中 audio标签的样式修改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比...
  • l333f
  • l333f
  • 2017年03月08日 17:48
  • 3653

HTML5中audio元素属性详解

转: http://www.devdo.net/html5-audio-video-attributes.html src属性 该属性指定媒体数据的URL地址。 autoplay属性 在...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年08月22日 16:13
  • 2775

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp...
  • u013267266
  • u013267266
  • 2016年08月09日 16:03
  • 756

html5中audio的详细使用

html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定 最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考 ...
  • alongken2005
  • alongken2005
  • 2015年03月23日 21:26
  • 45115
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Making HTML5 Audio Ring True
举报原因:
原因补充:

(最多只允许输入30个字)