html用audio制作mp3,HTML5中为一个简单的MP3播放器做音频 fallback标签比你想象的要难...

HTML5中为一个简单的MP3播放器做音频 fallback标签比你想象的要难

04/09/2013

8 分钟可看完

本文内容

[原文发表时间] 2013-03-26

我最近花了好几个晚上和周末来重新设计博客和Hanselminutes播客站点。之前我没意识到这个播客站点有多糟糕。我想以后能扩宽受众群体，因为目前的受众面有些窄。现在我在给这个站点六年来360多人添加头像。

我仍旧希望有更好的浏览器内置音频体验，所以假定我只是减少了音频标签并且完成了，对吧？

这个HTML5的音频标签不错吧？这样就行了，梦寐以求啊：

Your browser doesn't support the HTML audio tag. Be sad.

没有比这更容易的了。

这是在IE9+中看到的：

Chrome中：

Firefox，version19：

呃，这个版本的Firefox现在还不支持MP3音频，所以它只是闪了一下就消失了。Firefox很快就会支持MP3音频，虽然是用底层的操作系统来播放流文件而不是自己的内置代码。

在windows7及以上版本的Firefox20(beta版)上，你可以通过在about:config中打开media.windows-media-foundation.enabled来测试MP3音频的支持情况。

让我失望的是HTML5有很多规范问题，你可以注意到尽管我有些fallback文本，但在Firefox中看不到。这是因为fallback元素只有在你的浏览器完全不支持音频标签的时候才会用到。

这根本不是我想要的。我想要的是“可以支持这些音频资源吗？不行？那就显示fallback中的内容”。对我来说这样比较直观。

我通过在Mozilla工作的Christian Heilmann联系到了Chris Double并和他谈了这个问题，他说，“你需要使用WHATWG/W3C来解决这个问题。之前已经有过争论。”以前确实有过，从2009年10月开始，更多的人说用这种方式fall back不够直观：

我期望的(在这种情况并不正确)是如果我只放了一个源元素(比如一个MP4)，Firefox将使用fallback内容，如果我包含一个不支持格式的对象元素(比如，如果我使用一个QuickTime的对象，但是我没有安装QT，这时用户会看到fallback内容)，它确实是这样。在我看来，这种情况下唯一的选择是依靠Javascript和视频元素的canPlayType()函数。——Kit Grose

缺少直观的后备内容意味着我无法仅仅用HTML来制作普遍适用的音频播放器。因此我不得不选择使用JavaScript来处理这种基础的需求，这样太失败了。

让HTML5的音频在所有浏览器上正确fall back

你只能用JavaScript动态创建一个音频标签，然后审查这个标签。这不仅适用于音频标签，也适用于视频标签。最后我贴上从我朋友Matt Coneybeare那弄来的代码。

AudioPlayer.embed方法在最后嵌入了一个独立格式的WordPress音频播放器，这样在Firefox中当canPlayType函数返回false的时候，就有个flash播放器了。

HTML5中一个反应迅速并且触摸操作友好的音频播放器

不管怎么说，标签制作出来的默认音频播放器实在是有点挫，而我希望它能更好的支持触摸，在平板上看起来更棒等等。为此，我转向Osvaldas Valutis的音频播放器。这是个很好的 jQuery小插件，它把标签元素替换成一堆可爱的HTML代码块。其实你无法真正改变HTML5的标签元素样式，人们只是隐藏它，重建它，然后设法再去调用这些隐藏但还工作的音频元素。

这个插件，配上少许默认色彩的CSS样式，给我带来一个很棒的音频播放器，它看起来都一样，并且在在任何地方都能工作。除了在Firefox19/20，要等到下个版本Firefox对canPlayType函数的返回值为true时，这个插件就能工作了！在此之前，用的是flash的fallback播放器，也是很好用的。

另一个问题是很多Firefox用户都安装QuickTime插件。当渲染Osvaldas的音频播放器时，JavaScript审查会让Firefox浏览器提醒大家没安装它的请安装，而安装后播放器还是无法使用。

最后我对Matt的代码小小的修改了下，让它支持Osvaldas播放器。我发现代码变得更加动态了，所用元素更少，不过这让我阅读起来更容易。

首先，试着用音频标签。有用吗？非常有用，生成播放器；

不支持MP3音频？动态生成一个flash播放器。隐藏音频播放器(好像不需要)

不幸的是，对于代码的可读性，有HTML格式的“.audioPlayer”jQuery插件，还有内嵌的“音频播放器”flash。它们虽然不同，但是名称相同，我没有修改他们，J

Your browser doesn't support the HTML audio tag. You can still download the show, though!

总之，目前为止很好用。

奇怪的Bug ： 当我的站点加载评论的时候，音频播放器被阻止了，Chrome看起来似乎卡住了。有JavaScript专家想说两句的吗？如果加载一个页面—— 就像这个 —— 在页面加载完成之前点击播放器，音频没有放出来。这个问题只发生在Chrome 。有啥想法吗？

看到这，考虑下订阅http://hanselminutes.com吧！这“为开发者注入了新鲜的空气”。