html5音频属性<audio>以及常见手机开发坑

前言：h5新引入了一个播放音频的属性<audio>

音频格式

 　　HTML5 Audio支持的格式有：wav，mp3和ogg格式，首先看看各大浏览器的支持情况

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

　　先安利一下格式的定义：　　

     Ogg：一种新的音频压缩格式，是完全免费、开放和没有专利限制的。

     MP3：是一种音频压缩技术。它被设计用来大幅度地降低音频数据量。

     WAV：为微软公司开发的一种声音文件格式，声音文件质量和CD相差无几。

　　opera,chrome和firefox对三种模式都支持，而微软和苹果则对自己有专利利益的mp3格式情有独钟，而对潜在竞争者开源的ogg进行了封杀，ogg是一种为了对抗mpeg(音频上就是mp3)格式开发的一种音视频技术，但他的关系比较微妙，因为目前没有哪个正式的公司敢直接使用ogg，因为商业推广ogg存在专利诉讼风险，之所以目前还没有人诉讼ogg，是因为目前没有大鱼上钩，不值得诉讼，但是反过来一旦诉讼失败，ogg被证明没有侵权mpeg，那以后mpeg就没有人使用了。

 audio 标准API

• src: 要播放的音频的 URL。
• preload: 是否预加载，如果使用 "autoplay"，则忽略该属性。
• autoplay: 是否自动播放。

• autoplay="autoplay"

  
  
• loop: 是否循环播放。

  loop="loop"

• controls: 是否显示浏览器自带的控制条，例如播放按钮。

• controls="controls"

<以上来自互联网其他博客>

所以只要你提供ogg 和 mp3就能很好的支持大部分主流浏览器

<audio controls="controls" >
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />

//将资源用<source>标签可以很好的引入多个格式的资源
Your browser does not support the audio element.
</audio>

关于preload的用法

属性值描述规定是否预加载音频。可能的 load 值：
auto – 当页面加载后载入整个音频
meta – 当页面加载后只载入元数据
none – 当页面加载后不载入音频

预先加载音频
在实际的开发中，一种对音频很好的处理方法是对其进行预先加载，这样可以提高页面的加载速度，HTML5的标签提供了preload属性，并有三种值可供选择：

· “none”: 这个值指的是用户不需要对音频进行预先加载，这样可以减少网络流量，一个典型的情景是如果是一个具备播客功能的语音播客中，每一篇文章其实都有音频，但只有当用户确认打开这些音频收听时，才通过网络进行加载。否则，试想一下，这么多数量的音频同时进行预加载，速度是相当慢的。

· “metadata”: 这个选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。

· “auto”:这个选项告诉服务端，用户需要马上加载音频并进行流式播放，这在比如一些游戏场景等需要实时音频的场景中会用到。
要注意的是，如果在使用audio标签时中当设置音频的src值的时候，默认采用的设置值是将preload的加载属性设置为auto的，因此如果需要另外设置加载的属性值，需要在设置src前进行设置。

preload 属性规定是否在页面加载后载入音频。
如果设置了 autoplay 属性，则忽略该属性。

更多关于audio的信息以及手机上出现的坑可以查看这篇bloghttps://www.cnblogs.com/zhusheng2008/p/5529439.html