Audio

做一个移动端h5页面，需要添加一个背景音乐时我们通常用html5的新标签audio。以下是对改标签在使用上的一点摘记。

1.Audio元素

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
该元素支持三种音频格式：Ogg Vorbis、Mp3、Wav。三种格式对浏览器的支持程度不尽相同。具体可查看http://www.w3school.com.cn/html5/html_5_audio.asp

2.Audio的使用

• 属性
  autoplay =“autoplay” 音频在就绪后马上播放
  controls = “controls”向用户显示控件，比如播放按钮
  loop =　“loop”　每当音频结束时重新开始播放
  preload　＝“preload”　音频在页面加载时进行加载，并预备播放。
  如果使用 “autoplay”，则忽略该属性
  src = “url” 要播放的音频的 URL

• 在页面中直接使用该标签

<audio src="yll.ogg" controls="controls">
    您的浏览器不支持此标签
</audio>
//src兼容性写法
<audio controls="controls">
  <source src="yll.ogg" type="audio/ogg">
  <source src="yll.mp3" type="audio/mpeg">
  您的浏览器不支持此标签
</audio>

• 使用JS生成Audio元素

//document.createElement()方法
var audio = document.createElement('audio')  //生成一个audio元素
audio.controls = true  //这样控件才能显示出来
audio.src = 'xxxxx'  //音乐的路径
document.body.appendChild(audio)  //把它添加到页面中

//构造函数的方法
var audio = new Audio()
audio.controls = true  //这样控件才能显示出来
audio.src = 'xxxxx'  //音乐的路径
document.body.appendChild(audio)  //把它添加到页面中

3.移动端自动播放不触发的解决办法

在移动端的H5页面中有时候需要自动播放背景音乐，但是有些浏览器会禁掉自动播放。那么这时候我们就需要用js去触发自动播放。

• 利用touch事件解决

$('html').on('touchstart',function(){
    audio.play();
});

//只运行一次事件处理函数
$('html').one('touchstart',function(){
    audio.play();
});