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();
});