angular - 数组缓冲区 : I want to play the audio from an arraybuffer using decodeAudioData in angular

Question

嗨我的问题是我想解码通过 HTTP 方法接收的数组缓冲区以便在浏览器中播放它我的问题请看一下我将尝试解释更多的代码。

    ngOnInit() {
      // this service returns the arraybuffer and I successfully get it .
        this.radioService.generateVoiceMethode().subscribe(res => {
            console.log(res);  // display the array in the console 
            this.audioArray = new ArrayBuffer(res.byteLength);
            this.audioArray = res;


               console.log(this.audioArray); // display in the console with scucess 
// my problem is the data in this  audioArray  no longer exists when I  try to 
     // decode it in another method 

            });

        }




 playAudio() {

    console.log(this.audioArray); // this display empty arraybuffer !! 

    this.context.decodeAudioData(this.audioArray).then((buffer)=>{
        this.buf = buffer;
        this.play();
    }).catch((error)=>{
        console.log(error); /// error is : DOMException: Unable to decode audio data
    });



 }

Answer 1

我猜你调用 playAudio之前 radioService.generateVoiceMethode()有机会得到回复并填写audioArray
稍加重组；

ngOnInit() {
    this.radioService.generateVoiceMethode().subscribe(res => {
        console.log(res);  // display the array in the console 
        this.audioArray = new ArrayBuffer(res.byteLength);
        this.audioArray = res;
           console.log(this.audioArray);
           this.playAudio(this.audioArray);
        });
}

playAudio(audioArray) {
    console.log(audioArray); // this display empty arraybuffer !! 

    this.context.decodeAudioData(audioArray).then((buffer)=>{
    this.buf = buffer;
        this.play();
    }).catch((error)=>{
        console.log(error); /// error is : DOMException: Unable to decode audio data
    });
}

这可确保您调用 playAudio()设置数据后的方法。

或者，您也可以选择使用可观察模式来启动 playAudio 方法