兼容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只适合一开始就自动播放声音，若你是做那种微信场景（打开页面模拟收到很.........完整代码请登录后点击上方下载按钮下载查看