支付宝小程序无法播放(音频地址为base64格式的)音频文件

最近一段时间做项目遇到一个头疼的问题,就是我的移动端页面嵌套在其他的第三方小程序页面内,需要音频播放的功能,我拿到的音频文件地址为base64,这时需要在支付宝小程序中播放,但是支付宝小程序中点击了没有任何作用音频也不播放

        


let audioPlay = {
    ctx : null,
    source : null,
    bseData : bseData,
    // todo 初始化方法
    init:(bseData)=>{
      this.bseData = bseData;  
      let AudioContextData = window.AudioContext || window.webkitAudioContext;
      this.ctx = AudioContextData ? new AudioContextData() : '';
        if (this.ctx) {
            //TODO 创建音频源头节点
            //TODO createBufferSource() 方法用于创建一个新的AudioBufferSourceNode接口,该接口可以通过AudioBuffer 对象来播放音频数据。
            this.source = this.ctx.createBufferSource();
        } else {
            console.log('创建音频源头节点失败')
        } 
    },
    //TODO 加载音频
    loadAudio:()=>{
        const res = await fetch(this.bseData);
        const arrayBuffer = await res.arrayBuffer(); // byte array字节数组
        console.log(arrayBuffer)
        //TODO AudioBuffer对象可以通过AudioContext.createBuffer 来创建或者通过 AudioContext.decodeAudioData成功解码音轨后获取
        const audioBuffer = await this.ctx.decodeAudioData(arrayBuffer, function (
            decodeData
        ) {
            return decodeData;
        });
        return audioBuffer;
    }    

    //todo 设置播放音频数据
    playAudio:(audioBufferData)=>{
        //TODO 设置数据
        this.source.buffer = audioBufferData;
        //TODO 设置,循环播放
        this.source.loop = false;
        //TODO 头尾相连
        this.source.connect(this.ctx.destination);
        //TODO  可以对音频做任何控制
        this.source.start(0); //立即播放
    }
    //todo 播放
    playAudio:(back)=> {
        // TODO 获取音频buffer
        const audioBufferData= await this.loadAudio();
        this.playSound(audioBufferData);
        // TODO audioBuffer.duration为音频播放时长
        if (back) {
            back(audioBufferData.duration)
        }
    }

    //TODO 暂停
    resumeAudio:()=> {
        //TODO  判断当前音频是否为播放状态   running为播放  suspended为暂停状态
        if (this.ctx.state === "running") {
            //TODO AudioContext 接口的suspend() 方法暂停音频上下文对象中的进度,并暂时剥离进程对音频设备硬件的访问权限,减少 CPU 和电池的使用。
            //TODO  当程序在一段时间内不会使用音频上下文对象时,这个方法对减少硬件资源占用是非常有用的。
            this.ctx.suspend();
        } else if (this.ctx.state === "suspended") {
            // TODO AudioContext 的 resume() 方法,恢复之前暂停播放的音频。
            this.ctx.resume();
        }
    }

    //TODO 停止
    stopAudio:()=> {
        this.source.stop();
    }

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值