audio

audio是HTML5增加的HTML标签。用来播放音频。

IE8及以下版本不支持audio元素。

1.1、audio标签的属性
属性取值说明
srcURL要播放音频的地址
looptrue | false是否循环播放
mutedtrue | false是否静音
controlstrue | false是否显示控件，默认控件并不好看，可能我们希望自己编写播放控件
autoplaytrue | false是否页面加载完成后就自动播放。该属性在iOS和Android高版本不起作用。
preloadauto | meta | none

是否预加载音频资源。如果使用autoplay，则忽略该属性。

auto表示当页面加载完成后立马加载音频文件（只是请求文件，预备好，并不播放）。

meta表示当页面加载完成后立马加载音频文件的元数据。音频一般都会包含元数据的， 元数据在音频文件的头部。不同的音频格式，元数据所占的字节数不同。 其实，一个audio标签至少会发送两个HTTP请求， 第一个HTTP就是请求元数据的，从第二个开始才是可以播放的音频数据。

none表示不预加载。

示例：

<audio preload="meta" controls muted autoplay loop />
<audio preload="meta" controls='true' muted='true' autoplay='true' loop='true' />
1.2、audio相关的javascript方法

播放：

var mediaPlayer = document.getElementById('audio1');
mediaPlayer.play();

暂停播放：

var mediaPlayer = document.getElementById('audio1');
mediaPlayer.play();

注意：没有stop()方法。

1.3、iOS和Android对autoplay属性不支持的解决

参考

移动端与PC不同，移动端使用的网络环境通常是移动网络，移动网络的流量是相当宝贵的，而音频文件通常都是相对比较大的。 所以，一但在移动端自动播放音频的话，用户不知情的情况下就会消耗大量流量。所以为了用户考量，iOS对autoplay属性不支持。 播放必须让用户自己触发。一个伟大的公司，一定要防止人性的恶！所以，后来Android也采纳了这个idea。

在微信中，微信JS SDK能够自动播放。

示例：

function autoPlayMusic(viewId, url) {
    var mediaPlayer = document.getElementById(viewId);
    mediaPlayer.src = url;
    if (isMobile()) {
        loadScript(window.location.protocol + '//res.wx.qq.com/open/js/jweixin-1.0.0.js', function () {
            wx.config({});
            wx.ready(function () {
                mediaPlayer.play();
            });
        });
    } else {
        mediaPlayer.play();
    }
}

在移动端的其他浏览器中，可以让用户触摸界面上的任意位置来触发播放。

示例：

var mediaPlayer = document.getElementById(viewId);
mediaPlayer.src = url;

document.addEventListener('touchstart', function () {
    mediaPlayer.play();
}, false);