javascript - 为什么audio paly() 方法在安卓低版本和苹果低版本无法自动播放

问题描述

问 题

$(function (){

$.getJSON("http:// ...........?template=1&callback=?",gettemplate)
function gettemplate(data) {
    //调用音乐播放
    $.Includ(["Music"], function() { 
        //调用方法
        $.Music(base_data["Music"]);
    })
}

$.extend({
    Music:function(musicSrc){
        if($("#Music").length > 0){
            return false;
        }else{
            $("body").append('<div class="Music" id="Music" play="0"><audio id="Music_play" src="' + musicsrc + '" hidden="true"  loop="loop" > </audio> </div>');
            
            $("Music").on("click" ,function (){
                var _Music_play=$("Music_play")[0];
                var _this = $(this);
                
                if(_this.attr("play") != 1){
                    _this.addClass(MusicRotate);
                    _Music_play.play();
                    _this.attr("play" , "0")
                }else{
                    _this.removeClass("MusicRotate");
                    _Music_play.pause();
                    _this.attr("play" , "0");
                }
            });
            
            $("#Music").click();
            
        }
    }
})

}

CSS样式 未提取。

导致的现象 是： 在最新出的 手机上 音乐能够 正常自动播放， 图标也在进入的时候 正常旋转，

（iphone   5s  6  6s  7  7p   三星新版本手机） 

以下是不正常的 手机 型号和问题 ： 小米  oppo   iPhone6p  音乐图标旋转， 但是音乐没有自动播放， 检测 代码 
console.log($("#Music_play")[0].currentTime);   // 音乐播放状态时间 输出结果为 0 ;
    

必须要将 图标 点击 两次 才能成功播放

请 大神  解答  

解决方案

移动端的部分浏览器出于用户体验和安全性（主要是保护用户流量）是禁止了自动播放和自动加载资源的。
这个部分直接传送门： https://segmentfault.com/a/11...

你应该在页面初始化的时候就初始化一个audio的dom，然后后面的点击等事件直接播放，而不是点击才创建dom，手动抛事件，这样是无效的。

这篇关于javascript - 为什么audio paly() 方法在安卓低版本和苹果低版本无法自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！