HTML5 Audio兼容问题

Audio 标签使用过程中遇到了一些问题，我们具体看一下这些问题并解决它。

音频预加载问题

表现: preload="auto" 在 ios 系统的 safari 和微信上不支持

解决方法: 需要用户主动触发事件才能播放，示例代码如下:

$("#btn").click(function(){
    $("#audio").load()
})

音频自动播放问题

表现: ios 端 safari 或者部分安卓浏览器不支持 autoplay 属性

解决方法: 引导用户手动触发播放操作，例如绑定 touchstart 事件进行 audio.play() 操作。如果在微信环境下可以调用微信插件(jweixin-1.2.0.js)触发自动播放，示例代码如下:

// 微信配置信息（即使不正确也没问题)
wx.config({
  debug: false,
  appId: '',
  timestamp: 1,
  nonceStr: '',
  signature: '',
  jsApiList: []
});
// 在ready时触发相关事件
wx.ready(function() {
  // 触发一下play事件
  audio.play()
})

音频初始化延迟问题

表现: ios safari 浏览器初始化一个新的音频会有几秒延迟

出现原因: 因为 ios 需要实例化一个新的音频对象，再通过网络请求音频资源，音频资源加载完毕之后才能进行播放

解决方法: 在页面 ready 之后把每个文件都 load 一下，然后再调用 play 方法，这么做可以使音频资源做预加载，提前请求网络，可以具体业务场景来优化使用，示例代码如下:

$(function(){
   $("#audio1").load();
   $("#audio2").load();
})

音频静音问题

表现: 用户可以在相关页面通过触发事件实现音频的静音操作

解决发放: **可以通过设置 muted 属性来设置 Audio 静音，但是在 iOS8 及其以下或者 IE9 及其以下版本不支持 muted 属性，示例代码如下:

$("#audio").muted = true