码迷,mamicode.com
首页 > 微信 > 详细

微信浏览器实现音乐自动播放

时间:2016-06-18 12:53:08      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:

转至:http://www.ipastimes.com/post/52.html

  HTML5音频播放在移动端有局限性,在移动版 Safari 中加载的页面上,不能自动播放音频文件。音频文件只能从用户触发的触摸(单击)事件加载。如果在 HTML 标记中使用了 autoplay 属性,那么移动版 Safari 将会忽略这个属性,并且不会在加载页面时播放此文件,避免移动端流量在不知不觉中浪费,很人性化的设计。但对HTML5应用开发者来说,这不是个好消息。

    网上查找了很多资料,通过hack手段来实现自动播放是不可能的,幸运的是,我们大多数情况下是依赖微信浏览器的。这里有个方法貌似可行:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Audio auto play in mobile</title>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <audio preload="preload" id="car_audio" src="music.mp3" loop=""></audio>
<script>
    setTimeout(function(){
        $(window).scrollTop(1);
    },0);
 
    /*音乐*/
 var audio = $(‘#car_audio‘);
    var isPlaying = false;
    function playAudio() {
        var audio = $(‘#car_audio‘);
        if (audio.attr(‘src‘) == undefined) {
            audio.attr(‘src‘, audio.data(‘src‘));
        }
        audio[0].play();
        isPlaying = true;
    }
    $(function(){
        playAudio();
        document.addEventListener("WeixinJSBridgeReady", function () {
            WeixinJSBridge.invoke(‘getNetworkType‘, {}, function (e) {
                network = e.err_msg.split(":")[1];  //结果在这里
 playAudio();
            });
        }, false);
    })
</script>
</body>
</html>

  

强调一下,只适用于微信浏览器。

测试环境:iPhone 6  ios 8.3

测试时发现的问题:如果mp3文件过大(大于2M),有可能不会自动播放, 又换了300KB的,测试OK!

有发现更有效的方法,或者无效机型,欢迎留言!

微信浏览器实现音乐自动播放

标签:

原文地址:http://www.cnblogs.com/mauricechans/p/5595952.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!