兼容ios与andriod的移动端音频自动播放音乐效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：兼容ios与andriod的移动端音频自动播放音乐效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<style>
    * {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        margin: 0 auto;
        height: 100%;
    }

    body {
        padding: 25px 25px;
    }

    .audio {
        display: none
    }

    .buttons {
        margin: 15px 0;
    }

    .buttons>div {

        min-width: 60px;
        width: auto!important;
        height: 45px;
        line-height: 45px;
        margin-bottom: 10px;
        color: #fff;
        text-align: center;
        padding: 0 8px;
        border-radius: 5px;
    }

    .buttons>div:nth-child(1) {
        background: #ace;
    }

    .buttons>div:nth-child(2) {
        background: #ff0000;
    }

    .buttons>div:nth-child(3) {
        background: #4CAF50;
    }

    .buttons>div:nth-child(4) {
        background: #008CBA;
    }

    .buttons>div:nth-child(5) {
        background: #555555;
    }

    .buttons>div:nth-child(6) {
        background: #e7e7e7;
    }
</style>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

</head>

<body>
	<h3>【good】音频自动播放总结(兼容微信苹果iphone)</h3>
    <div id="audioDiv">
        <audio id="audio" controls="controls" autoplay="autoplay">
            <source src="" type="audio/mpeg"/>
            设置不支持音频文件
        </audio>
    </div>
    <div class="buttons">
        <div class="btn play">播放</div>
        <div class="btn pause">暂停</div>
        <div class="btn stop">停止</div>
        <div class="btn skip">跳到第3秒</div>
    </div>
    <style>
    
    </style>
    <script type="text/javascript">

        /*------------设置音频播放变量 edit 20190602-1 把这些变量放到前面-------------*/
        var media = document.getElementById('audio'); //音频对象 //edit 20190602-1 把变量audio改成media
        var mp3Root = '//repo.bfw.wiki/bfwrepo/sound/'; //音频根路径
        var audioArr = [];
        var mp3Arr = ['5e148aa3821f2.mp3','5e1528f1dca14.mp3'];
        for(var i=0;i<mp3Arr.length;i++){audioArr.push(mp3Root+mp3Arr[i]);}
        mp3Arr = audioArr;

        /**:::::::::::::::::::::::::
         * [函数:自动播放音频]
         * @param string mp3 音频文件路径
         * edit 20190602-1
         :::::::::::::::::::::::::*/
        function autoPlayAudio(mp3){ 
            if(typeof(mp3)=='undefined') mp3 = "";
            //alert("声音文件111:\n"+mp3);
            
            //1.电脑端、安卓这样就可以自动播放了
            $('#audio source')[0].src = mp3; //音频赋值 

            //2.准备开始播放时(这段代码并非必须,加上比较保险)
            media.oncanplay = function(){
                media.play(); 
                //alert("hi,声音准备开始播放了");
            }

            //3.自动播放兼容：苹果iphone(ios)中内置浏览器safri直接播放音频
            //实测：对大部分ios版本用内置浏览器或在微信中打开网页都有效
            //说明1：iphone浏览器safri需等待用户交互动作后才能播放media,即如果你没有得到用户的action就播放的话就会被safri拦截
            //说明2：本方案其实是个障眼法，因为一般人打开手机网站手指总会不经意就碰到屏幕
            if (/iphone|ipod|mac|ipad/i.test(navigator.userAgent.toLocaleLowerCase())) {
                //$('html,body').on('touchstart', function() { //总是
                $('html,body').one('touchstart', function() { //只一次        
                    media.play(); 
                })
            }

            //4.自动播放兼容：苹果iphone(ios)部分ios版本可能要先load下才能播放       
            media.load();  

            //5.自动播放兼容：微信中打开时在苹果iphone(ios)中自动播放音频
            //一般须在head标签中引入微信的js：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，且在微信Weixin JSAPI的WeixinJSBridgeReady才能生效。
            //注意1：WeixinJSBridgeReady只会触发一次，若微信已经ready了，但还没执行到你监听这个ready事件的代码，那么你的监听是没用的，
            //注意2：WeixinJSBridgeReady只适合一开始就自动播放声音，若你是做那种微信场景（打开页面模拟收到很多条微信，每条微信都要播放那段音效）或初始化故意延时几秒才播放声音，实际上这种兼容方案也是无效的
            //注意3：若监听里面添加alert调试,一般在微信中打开链接是不会alert的，而是刷新页面时才会alert出来
            //注意4：若删了下面代码,在微信中部分iphone(ios)版本是不会自动播放声音的     
            document.addEventListener("WeixinJSBridgeReady", function () { 
               media.play();  
               //alert("Hi,微信中的部分苹果iphone(ios)版本");
            }, false);
           
        }

        /**:::::::::::::::::::::::::
         * [函数：解决音频自动播放Bug]
         * 此Bug一般出现在苹果iphone(ios)中
         * bug1：无法同时播放多个音频
         * bug2：单个音频想要延迟N秒后才自动播放，却发现不会自动播放了
         * @param string mp3 音频文件路径
         * add 20190602-1
         :::::::::::::::::::::::::*/
        function iosPlayBugs(mp3){
            if (window.WeixinJSBridge) {
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                    media.play();
                }, false);
            } else {
                document.addEventListener("WeixinJSBridgeReady", function () {
                    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                        media.play();
                    });
                }, false);
            }
            autoPlayAudio(mp3);
            media.play(); //必须,否则在非微信中(即手机内置浏览器中)打开时不会播放
        }




        $(function() {

            /*------------初始化播放音频edit 20190602-1-------------*/
            //=====马上播放
            //autoPlayAudio(mp3Arr[0]);
            //=====延时播放
            var initTimes = 3; //初始化时多少秒后推送消息（单位：秒）
            var count = 1; //计数器
            var sh = setInterval(function(){
                count++;
                if(count%initTimes==0){ //取余,整数倍
                    iosPlayBugs(mp3Arr[0]);
                    //只执行一次就把定时器销毁，以免系统卡顿
                    clearInterval(sh);
                    sh = null;
                }
            },1000);

                      
            /*+------------------------+*/
            //=====定时器
            var sTimes = 10; //播放间隔(秒)
            var duration = 0; //音乐时长(秒) 
            var timer = setInterval(function() {
                autoPlayAudio(mp3Arr[2]);
            }, parseFloat(sTimes) * 1000);




            /*----.........完整代码请登录后点击上方下载按钮下载查看