HTML5之audio沒法自動播放的問題

HTML5新增了video元素和audio元素，替代了傳統HTML4使用複雜的object元素與embed來播放視頻或者音頻的方法。此次的一個項目，產品經理要求手機加載開始時播放音樂，想到播放音樂，又是在ios和android平臺，那audio元素必然是首選。

audio:標籤訂義聲音，好比音樂或其餘音頻流。

接下來測試了，

測試一：

<audio autoplay="autopaly" loop="loop" src="1.mp3"></audio>

發如今chrome跑的很歡，可是部署到線上手機訪問就懵逼了，等啊等的，老半天沒有聲音了……

測試二（加段JS試試看）：

<script>
    (funtion(){
        var $audio = new Audio();
        $audio.src = '1.mp3';
        $audio.play();
    })();
</script>

在chrome跑的很歡，Android平臺上也跑的很歡，因而乎有點小傲嬌了，用ios跑下……猜的不錯懵逼了，幾個意思幾個意思……

終於在https://alexgibson.github.io/offlinewebaudio/上面找到答案了(^_^)(^_^)

連蘋果的官方文檔網頁都搜出來了，不能自動播放。網上雖然有不少辦法例子繞過去，不過都不必定有用。仍是加在頁面的touchstart上一次，好，也符合蘋果規定

觸屏即播，整個html都是播放按鈕，在用戶看來幾乎等於當即播放。
（firsttaped = 0 用來標記第一次觸屏未發生。）

var audio = document.getElementById('pageaudio');
audio.oncanplay = playmusic();
var firsttaped = 0;
function playmusic(){
    $('html').on('touchstart',function(){
        if(firsttaped == 0){
            audio.play();
            firsttaped = 1;
        }
    });
};

或者

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

$("body").one("touchstart",
    audio.play(); 
});