uniapp createInnerAudioContext实现支付宝和微信语音播报

275 阅读1分钟
 export default {
     data() {
         return {
             money: '',
             arrAudio: [],
             arrNex: 0,
             innerAudioContext: null
         }
     },
     mounted() {
         this.money = this.moneyFomat(this.price);
     },
     methods: {
         playVideo(type) {
             this.arrAudio = []
             this.innerAudioContext = null;
             // 获取支付宝或微信语音
             this.arrAudio.push(type + '_recive');  
             // 金额文字转为对应的音频名字
             for (let i = 0; i < this.money.length; i++) {
                 switch (this.money[i]) {
                     case '零':
                         this.arrAudio.push('0');
                         break;
                     case '壹':
                         this.arrAudio.push('1');
                         break;
                     case '贰':
                         this.arrAudio.push('2');
                         break;
                     case '叁':
                         this.arrAudio.push('3');
                         break;
                     case '肆':
                         this.arrAudio.push('4');
                         break;
                     case '伍':
                         this.arrAudio.push('5');
                         break;
                     case '陆':
                         this.arrAudio.push('6');
                         break;
                     case '柒':
                         this.arrAudio.push('7');
                         break;
                     case '捌':
                         this.arrAudio.push('8');
                         break;
                     case '玖':
                         this.arrAudio.push('9');
                         break;
                     case '拾':
                         this.arrAudio.push('10');
                         break;
                     case '百':
                         this.arrAudio.push('100');
                         break;
                     case '千':
                         this.arrAudio.push('1000');
                         break;
                     case '万':
                         this.arrAudio.push('10000');
                         break;
                     case '亿':
                         this.arrAudio.push('10000000');
                         break;
                     case '分':
                         this.arrAudio.push('fen');
                         break;
                     case '角':
                         this.arrAudio.push('jiao');
                         break;
                     case '元':
                         this.arrAudio.push('yuan');
                         break;
                     case '整':
                         this.arrAudio.push('zheng');
                         break;
                 }
             }
             // 创建并返回内部 audio 上下文 innerAudioContext 对象。
             this.innerAudioContext = uni.createInnerAudioContext();
             // 避免出现autoplay失效问题
             this.innerAudioContext.autoplay = false;
             // 先播放支付宝或微信收款语音
             this.innerAudioContext.src = 'xxx/audio/' + this.arrAudio[this.arrNex] + '.mp3'; // 音频存放到oss或本地
             setTimeout(() => {
                 this.innerAudioContext.play() 
             }, 1000);
             // 连续播放
             this.innerAudioContext.onEnded(() => {
                 this.endPlay()
             })
         },
         // 金额转为文字和单位
         moneyFomat(n) {
             if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
                 return "数据非法";
             var unit = "千百拾亿千百拾万千百拾元角分",
                 str = "";
             n += "00";
             var p = n.indexOf('.');
             if (p >= 0)
                 n = n.substring(0, p) + n.substr(p + 1, 2);
             unit = unit.substr(unit.length - n.length);
             for (var i = 0; i < n.length; i++)
                 str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
             return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(
                 /(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
         },
         endPlay() {
             // 播放金额音频文件
             this.arrNex = this.arrNex + 1;
             if (this.arrNex < this.arrAudio.length) {
                 // 继续播放下一条
                 this.innerAudioContext.src = 'https://shuibaodev-v2.oss-cn-shenzhen.aliyuncs.com/audio/' + this
                     .arrAudio[
                         this
                         .arrNex] + '.mp3';
                 this.innerAudioContext.play()
                 return;
             }
         }
     }
 }

调用

// 判断是否是微信浏览器
isWeiXin() {
    // #ifndef H5
    return false;
    // #endif
    var ua = navigator.userAgent.toLowerCase();
    uni.setClipboardData({
        data: ua
    })
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}

//判断安卓还是iOS
isIos() {
    let platform = uni.getSystemInfoSync().platform
    if (platform == 'ios') {
        return true;
    } else if (platform == 'android') {
        return false;
    }
}

// 正常调用这个
this.playAudio('alipay')

// ios微信浏览器  
if(this.isWeiXin() && this.isIos(){
    const that=this;
    document.addEventListener("WeixinJSBridgeReady", function() {
        that.playAudio('alipay')
    }, false);
}

音频文件命名:

image.png

参考链接:uniapp.dcloud.net.cn/api/media/a…

autoplay失效:codeleading.com/article/150…