Dom Audio 以及 Web Audio 在微信网页上的播放管理工具类(自动播放，不需要点击播放)

DomAudioGroup.js

import WeixinAudio from "../weixin/WeixinAudio";
import WeixinUtils from "../weixin/WeixinUtils";


export default class DomAudioGroup {
    _audioUrl = null;
    _endCallback = null;

    _domAudio = null;

    constructor(audioUrl) {
        this._audioUrl = audioUrl;

        this._domAudio = new Audio(this._audioUrl);
        this._domAudio.loop = false;
        this._domAudio.crossOrigin = 'anonymous';
        this._domAudio.addEventListener('ended', this.endPlay.bind(this));
    }

    play() {
        this.close();

        if(WeixinUtils.isWeiXin()) {
            new WeixinAudio(this.playDomAudio,this);
        }else {
            this.playDomAudio();
        }
    }

    playDomAudio() {
        this._domAudio.load();
        this._domAudio.play();
    }

    endPlay(e){
        if(this._endCallback) {
            this._endCallback.call();
        }
    }

    close() {
        this._domAudio.pause();
    }
}

DomAudioGroupInstance.js

import DomAudioGroup from "./DomAudioGroup";



export default class DomAudioGroupInstance {
    static __instance;

    _domAudioDict = null;

    constructor() {
        this._domAudioDict = {};
    }

    /**@type {DomAudioGroupInstance} */
    static get instance() {
        if(!DomAudioGroupInstance.__instance) {
            DomAudioGroupInstance.__instance = new DomAudioGroupInstance();
        }
        return DomAudioGroupInstance.__instance;
    }

    play(/**@type {string}*/audioUrl,endCallback = null,isStopAll = true) {
        if(isStopAll) {
            this.stopAll();
        }

        let domAudioGroup = this._domAudioDict[audioUrl];
        if(!domAudioGroup) {
            domAudioGroup = new DomAudioGroup(audioUrl);
            this._domAudioDict[audioUrl] = domAudioGroup;
        }
        domAudioGroup._endCallback = endCallback;
        domAudioGroup.play();
    }

    stopAll() {
        for(let k in this._domAudioDict) {
            let domAudioGroup = this._domAudioDict[k];
            if(domAudioGroup) {
                domAudioGroup.close();
            }
        }
    }

}

WebAudioGroup.js

import WeixinAudio from "../weixin/WeixinAudio";
import WeixinUtils from "../weixin/WeixinUtils";


export default class WebAudioGroup {
    _audioUrl = null;
    _endCallback = null;

    __audioWeb = null;
    /**@type {number} */
    __audioCurrent = 0;

    _domAudio = null;

    _autoPlay = true;

    constructor(audioUrl) {
        this._audioUrl = audioUrl;

        cc.loader.load(this._audioUrl,(err,audio)=>{
            if(err) {
                cc.error("[AudioGroup.js]load mp3 url error=>",err);
            }else {
                this.__audioWeb = audio;
                if(this._autoPlay) {
                    this.play();
                }
            }
        });
    }

    play() {
        this.close();
        
        if(this.__audioWeb) {
            if(WeixinUtils.isWeiXin()) {
                new WeixinAudio(this.playWebAudio,this);
            }else {
                this.playWebAudio();
            }
        }else {
            this._autoPlay = true;
        }
    }

    playWebAudio() {
        this.__audioCurrent = cc.audioEngine.play(this.__audioWeb,false,1);
        if(this._endCallback) {
            cc.audioEngine.setFinishCallback(this.__audioCurrent, ()=>{
                this._endCallback.call();
            });
        }
    }

    close() {
        cc.audioEngine.stop(this.__audioCurrent);
    }
}

WebAudioGroupInstance.js

import WebAudioGroup from "./WebAudioGroup";



export default class WebAudioGroupInstance {
    static __instance;

    _webAudioDict = null;

    constructor() {
        this._webAudioDict = {};
    }

    /**@type {WebAudioGroupInstance} */
    static get instance() {
        if(!WebAudioGroupInstance.__instance) {
            WebAudioGroupInstance.__instance = new WebAudioGroupInstance();
        }
        return WebAudioGroupInstance.__instance;
    }

    play(/**@type {string}*/audioUrl,endCallback = null,isStopAll = true) {
        if(isStopAll) {
            this.stopAll();
        }

        let webAudioGroup = this._webAudioDict[audioUrl];
        if(!webAudioGroup) {
            webAudioGroup = new WebAudioGroup(audioUrl);
            this._webAudioDict[audioUrl] = webAudioGroup;
        }
        webAudioGroup._endCallback = endCallback;
        webAudioGroup.play();
    }

    stopAll() {
        for(let k in this._webAudioDict) {
            let webAudioGroup = this._webAudioDict[k];
            if(webAudioGroup) {
                webAudioGroup.close();
            }
        }
    }

}

WeixinAudio.js

export default class WeixinAudio {
    __callback = null;
    __thisObject = null;

    constructor(callback,thisObject){
        this.__callback = callback;
        this.__thisObject = thisObject;

        if(CC_DEBUG) {
            this.__callback.call(this.__thisObject);
            return;
        }

        try {
            this.init();
        } catch (error) {
            console.error("[WeixinJSBridge]error:",error);
            document.addEventListener("WeixinJSBridgeReady", ()=> {
                console.log("-------eventlistener caller-----");
                this.init();
            });
        }
    }

    init(){
        WeixinJSBridge.invoke('getNetworkType', {}, (e)=> {
            this.__callback.call(this.__thisObject);

            this.__callback = null;
            this.__thisObject = null;
        });
    }
}

WeixinUtils.js

export default class WeixinUtils {
    //功能菜单:
    static MenuItems = [
        "menuItem:share:qq",//分享到QQ
        "menuItem:share:weiboApp",//分享到Weibo
        "menuItem:favorite",//收藏
        "menuItem:share:facebook",//分享到FB
        "menuItem:share:QZone",//分享到 QQ 空间
        "menuItem:editTag",//编辑标签
        "menuItem:delete",//删除
        "menuItem:copyUrl",//复制链接
        "menuItem:originPage",//原网页
        "menuItem:readMode",//阅读模式
        "menuItem:openWithQQBrowser",//在QQ浏览器中打开
        "menuItem:openWithSafari",//在Safari中打开
        "menuItem:share:email",//邮件
        "menuItem:share:brand"//一些特殊公众号
    ];
    //功能菜单:备份列表
    static MenuItems_Backup = [
        "menuItem:share:appMessage",//发送给朋友
        "menuItem:share:timeline",//分享到朋友圈
        "menuItem:share:qq",//分享到QQ
        "menuItem:share:weiboApp",//分享到Weibo
        "menuItem:favorite",//收藏
        "menuItem:share:facebook",//分享到FB
        "menuItem:share:QZone",//分享到 QQ 空间
        "menuItem:editTag",//编辑标签
        "menuItem:delete",//删除
        "menuItem:copyUrl",//复制链接
        "menuItem:originPage",//原网页
        "menuItem:readMode",//阅读模式
        "menuItem:openWithQQBrowser",//在QQ浏览器中打开
        "menuItem:openWithSafari",//在Safari中打开
        "menuItem:share:email",//邮件
        "menuItem:share:brand"//一些特殊公众号
    ];

    /**是否屏蔽微信环境下的基础菜单功能 */
    static showOrHideBaseMenuItem(/**@type {boolean}*/isShow){
        if(isShow) {          
            wx.showAllNonBaseMenuItem();//显示所有功能按钮接口
        }else {
            wx.hideAllNonBaseMenuItem();//隐藏所有非基础按钮接口，“基本类”按钮详见附录3  
        }
    }


    /**屏蔽微信环境下的右上角，分享功能 */
    static blockShare(){
        try {
            if(WeixinUtils.isWeiXin()) {
                function onBridgeReady() { 
                    WeixinJSBridge.call('hideOptionMenu'); 
                }
                 
                if (typeof WeixinJSBridge == "undefined") { 
                    if (document.addEventListener) { 
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); 
                    } else if (document.attachEvent) { 
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); 
                    }
                } else { 
                    onBridgeReady(); 
                }
            }
    
            WeixinJSBridge.invoke('getNetworkType',{},function(e){
                // 在这里拿到e.err_msg，这里面就包含了所有的网络类型
                console.log(e.err_msg);
                //e.err_msg的取值如下所示: network_type:wifi wifi网络 2 network_type:edge 非wifi,包含3G/2G 3 network_type:fail 网络断开连接 4 network_type:wwan 2g或者3g
             });
        } catch (error) {
            console.log("Weixin error:"+error);
        }
    }

    /**@return {string} */
    static getQueryString(url, name) {
        var reg = new RegExp("(^|&|\\?)" + name + "=([^&]*)(&|$)", "i");
        var r = url.substr(1).match(reg);
        if (r != null) return decodeURIComponent(r[2]); return null;
    }

    /**@return {boolean} */
    static isWeiXin() {
        var ua = navigator.userAgent.toString();

        var str=ua.match(/MicroMessenger/i);
        if(str=="MicroMessenger") {
            return true;
        } else {
            return false;
        }
    }
}

使用方法：

WebAudioGroupInstance.instance.play(this.englishArrVo[data${this.currIndex}].audio_url);

或者：

DomAudioGroupInstance.instance.play(this.englishArrVo[data${this.currIndex}].audio_url);