最近一段时间做项目遇到一个头疼的问题,就是我的移动端页面嵌套在其他的第三方小程序页面内,需要音频播放的功能,我拿到的音频文件地址为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();
}
}