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

转载于:https://my.oschina.net/quantou/blog/738916