移动设备上的HTML5音频

首先。我们都知道Modernizr，我们都使用它，我们都喜欢它。有了Modernizr，我们从通过浏览器检测应用功能向功能检测迈出了一大步。这不仅是构建网站和网络应用的推荐方式，更是一种心态或思维方式。问问你的浏览器他能做什么（做一个测试），你就知道你能用什么，绝对不受浏览器供应商和版本的影响。

对于像HTML5音频这样复杂的功能，有了areweplayingyet，就有了一个社区，为HTML5音频的子功能、API调用和热插拔音源等最佳实践提供这样的测试，这真是太好了。

如果你通过一些测试并查看浏览器兼容性列表，你会发现许多测试在移动浏览器上都失败了，比如早期的Android实现，尤其是在iOS设备上。但为什么呢？HTML5音频的兼容性在iPad和iPhone上真的那么糟糕吗，尤其是当它是包含声音的唯一方式时？

嗯。是的，也不是。HTML5音频在iOS上也是非常糟糕的，但它可以工作。如果你知道这些规则，你就会知道为什么所有的测试都会失败，以及你如何处理这个问题。

#1 - 一个人不能简单地在JS事件上播放声音

这是最重要的规则。不要以为只要使用JS事件就可以播放声音，就像你在使用桌面浏览器时习惯的那样。每一个声音的播放都需要用户的互动，他的 "OK "或 "Go for it "是通过触摸你页面上的一个元素。这可以是内置的音频播放器控件（似乎不符合苹果的用户界面标准，因为它太小了），或任何与你的元素绑定的点击或触摸偶件。一旦互动完成，文件就会被下载到你的设备上。之后，你可以做所有你想做的很酷的音频事情。

但为什么你需要用户互动来播放音频（和视频）？这不是不寻常吗？可能是的，但想象一下你在外国拿着你的iPhone，带宽有限，试图到达你最喜欢的网站，而这个网站刚刚出现了一些漂亮的10MB的背景歌曲，不仅试图破坏你的神经，而且还在你下个月的电话账单上增加一些钱。用户互动现在看来是合法的。

可能的解决方案是。在你的应用程序中设置一个闪屏，用户必须将其移除，这样就会触发你的声音文件的下载。这很怪异，也很糟糕，但目前是唯一的办法。

#2 - 只能有一个!

经典的不朽老规则：你不能同时播放一个以上的声音文件。因此，在你的星际射击游戏中没有背景音乐和激光嗡嗡声。就个人而言，我对这一点没有意见。但如何利用这一点呢？想想 "应该只有一个！"。进入声音精灵。

图像精灵是众所周知的：拥有一张包含所有图标和东西的图像，并通过在CSS文件中设置正确的背景位置来访问它们。声音精灵的工作原理与此类似。把所有你想播放的声音放在一个音频文件中，并定义开始和结束的索引。现在的工作流程是这样的。

用户删除闪屏，下载文件
播放几秒钟的静音，就在开始和互动之后
之后，我们应该可以直接访问整个文件中的所有位置。只要你喜欢，就可以跳到你的位置

下面是我在演讲中想出的一些精灵演示。

<audio src="sprite.mp3" controls="none" id="myaudio" />

var maudio = document.getElementById('myaudio');

var soundSprite = [
  {start: 0, end: 3000},
  {start: 3500, end: 6789}
];

element.addEventListener('touchstart', function(ev) {
  maudio.play();
  playSoundFile(0);
})

function playSoundFile(idx) {
  maudio.currentPosition = soundSprite[idx].start;
  var x = setInterval(function() {
    if(maudio.currentPosition >= soundSprite[idx].end) {
      maudio.pause(); // There is no stop() in HTML5
      clearInterval(x);
    }
  }, 50);
}

现在，Soundsprites已经很普遍了，而且SoundManager2等库也很支持。

回想一下Modernizr。我们现在知道iOS设备支持HTML5音频，我们知道即使测试失败，我们也可以用它做很多事情。你能调整你的测试吗？在测试前让用户与你的应用程序互动可以吗？下载测试文件可以吗？或者你只是回到用户代理嗅探来包管你的目标平台？

Internet Explorer 9 移动版

上面学到的东西适用于大多数移动Webkit的实现，但我们也要处理另一个浏览器。移动设备上的IE9

IE9并不支持很多HTML5/CSS3功能，但它所支持的功能通常都实现得非常好，而且很强大。

Internet Explorer 9的移动版也是如此。而通常情况下，你可以期待在IE9中工作的一切也会在IE9移动版中工作。声音也是如此，在播放和下载文件时，我们甚至不需要等待用户的互动!虽然我不知道这是件好事还是坏事。

然而，有一件事在IE9移动版上不起作用，那就是在播放时改变你的声音 "位置"，所以声音精灵在那里不起作用。现在想象一下，一个专门覆盖IE9移动版和iOS的网络应用，我不知道测试在那里会是什么样子，或者你只是回到用户代理嗅探。

了解移动设备上的HTML5音频

移动设备上的HTML5音频

#1 - 一个人不能简单地在JS事件上播放声音

#2 - 只能有一个!

Internet Explorer 9 移动版