，译html5中一个简单mp3播放器的audio标签回退比你想象的要难
我已经花了好几个晚上和周末来重新设计博客和Hanselminutes podcast站点。这些年我都
没意识到这个播放站有多棒。我想以后能扩宽受众群体，目前的收听关系有点扁平。现在我
在给这个站点过去六年里所有的360多人添加头像。
非常感谢来自Portland Girl Geek Dinners的Lynsey Smith，顺便说一下，她很努力的为我
寻找图片！
我还希望有更好的浏览器内置音频体验，所以假定我已经加了audio标签并且完成了，对吧？
这个html5的audio标签不错吧？这样就行了，梦寐以求啊：
<audio
type="audio/mp3"/>
Your browser doesn't support the HTML audio tag. Be sad.
</audio>
如果你喜欢，可以到http://jsfiddle.net/CdxbX/来试一下。
没有比这更容易的了。
这是在IE9+中看到的：
chrome中：
firefox，version19：
呃，firefox现在还不支持MP3的audio标签，所以它只是闪了一下就消失了。firefox很快就
会在audio标签中支持MP3了，虽然是用操作系统底层来播放流文件而不是自己的内置代码。
在windows 7及后续操作系统上运行的firefox20（beta版），你可以在about：config中设置
media.windows-media-foundation.enabled来测试MP3音频的支持情况。
让我失望的是html5有很多规范问题，你可以注意到我在上面的代码中添加了回退文本，但在
firefox中看不到。因为回退的元素只有在你的浏览器根本不支持audio标签的时候才会用到
。
这根本不是我想要的。我想要的是“可以支持这些音频吗？不行？那就回退”。对我来说这
比较直观。
我通过在Mozilla工作的Christian Heilmann和Chris Double谈了这个问题，他说，“你要把
这个问题向上抛到WHATWG/W3C。之前已经有过争论。”确实有问题，从2009年10月开始就有
很多人说这样回退不直观：
我期望的（在这里不正确）是如果我只放了一个源元素（一个MP4），firefox会用下面的回
退内容，像这样的话如果我包含一个不被支持格式的对象元素（比如，如果我包含一个没安
装的QuickTime对象，用户会看到回退内容）。我看这种情况下唯一的选择是依靠javascript
和video元素的canPlayType()函数--Kit Grose
缺少直观的回退意味着我无法仅仅用html来制作普遍适用的音频播放器，我只能选择使用
javascript了，对于这种基础的事情来说，用javascript来写有点无赖了。
让html5的音频在所有浏览器中正确回退
你要用javascript动态创建一个audio标签，然后审查这个标签，看看它是不是适用于所有
video。最后，我贴上从我朋友Matt Coneybeare那弄来的代码。
<audio != audioTag.canPlayType
("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "audio.mp3"});
}
</script>
后面呢，我放一个从WordPress Audio Player搞来的独立的音频播放器，这样在firefox中当
canPlayType函数返回false的时候，就有个flash播放器做替代了。
html5中，一个可响应并且触感好的音频播放器
不管怎么说，audio标签默认制作出来的音频播放器实在是有点挫，而我希望它更好的支持触
摸，在平板上看起来更棒等等，为此，我转向Osvaldas Valutis的播放器。这是个很好的
jQuery小插件，它把audio标签元素替换成一个可爱的html块。其实你无法真正改变html5的
audio标签元素样式，人们只是隐藏它，重建它，然后重建的再去调用隐藏但还工作的audio
元素。
这个插件，配上少许渲染默认颜色的css代码，给我带来一个很棒的看起来一模一样的音频播
放器，而且普遍可用。除了在firefox 19/20中，要等到canPlayType函数返回true的时候才
可用！在此之前，用的是flash的回退播放器，用着也不错。
另一个问题是很多firefox用户都安装的QuickTime插件。当渲染Osvaldas的播放器时，
javascript审查有时可能会让firefox浏览器提醒大家没安装它的请安装，而安装后播放器还
是没用。
最后我对Matt的代码小小的修改了下，让它支持生成Osvaldas播放器。我发现代码更加动态
，所用元素更少，不过这让我阅读起来更容易。
首先，试着用audio标签。有用？很好，生成播放器；
不支持MP3音频？动态生成一个flash的播放器。隐藏音频播放器（好像不需要）
代码可读性悲剧了，有用来渲染html的".audioPlayer" jQuery插件，还有内嵌
的"AudioPlayer"flash。他们是不同的，可是名字一样。我还没修改过。
<audio >
Your browser doesn't support the HTML audio tag. You can still download
the show, though!
</audio>
<p >
var audioTag = document.createElement('audio');
/* Do we not support MP3 audio? If not, dynamically made a Flash SWF player.
*/
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType
("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer_1", {soundFile: "your.mp3",
transparentpagebg: "yes"});
$( '#audioplayer').hide();
}
else /* Ok, we do support MP3 audio, style the audio tag into a touch-
friendly player */
{
/* If we didn't do the "if mp3 supported" check above, this call would
prompt Firefox install quicktime! */
$( '#audioplayer' ).audioPlayer();
}
</script>
总之，目前为止很好用。
奇怪的bug：当我的站点加载评论的时候，播放器被阻止了，chrome看起来似乎挂了。有
javascript专家想说两句的吗？如果加载一个页面，就像这个-在页面加载完成之前点击播放
器，音频没有放出来，只是在chrome中这样。有想法不？
看到这，考虑下订阅 http://hanselminutes.com吧！It's "Fresh Air for Developers."
译自：http://www.hanselman.com/blog/FallbackHTML5AudioTagsForASimpleMP3PodcastAreHarderThanYoudThink.aspx