HTML5之audio没法自动播放的问题

HTML5新增了video元素和audio元素,替代了传统HTML4使用复杂的object元素与embed来播放视频或者音频的方法。此次的一个项目,产品经理要求手机加载开始时播放音乐,想到播放音乐,又是在ios和android平台,那audio元素必然是首选。html

audio:标签订义声音,好比音乐或其余音频流。android

输入图片说明

接下来测试了,ios

测试一:git

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

发如今chrome跑的很欢,可是部署到线上手机访问就懵逼了,等啊等的,老半天没有声音了……github

测试二(加段JS试试看):web

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

在chrome跑的很欢,Android平台上也跑的很欢,因而乎有点小傲娇了,用ios跑下……猜的不错懵逼了,几个意思几个意思……chrome

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

连苹果的官方文档网页都搜出来了,不能自动播放。网上虽然有不少办法例子绕过去,不过都不必定有用。仍是加在页面的touchstart上一次,好,也符合苹果规定oop

触屏即播,整个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(); 
});
相关文章
相关标签/搜索