CODEWITHSUNDEEP
htmltypescriptaudio
brahim belkhiria
brahim belkhiria

Reputation: 59

Play an audio from an arraybuffer of bytes?

I Have a bufferarray comes from a rest endpoint I have created with Java that returns a byte[] array ; so I managed to get the array with HTTP (I am using Angular) now I want to play the audio in the browser. I have done some research and I found the web audio API but the error is that I can not decode the array.

context = new AudioContext();
    audioArray : ArrayBuffer;
    buf ;
let arrayBuffer  = new ArrayBuffer(this.audioArray.byteLength);
     let bufferView  = new Uint8Array(arrayBuffer);

    for (let i = 0; i < this.audioArray.byteLength; i++) {
        bufferView[i] = this.audioArray[i];
    }
    console.log(arrayBuffer);
     // this function should decode the array but the error occurs 
       // DOMException: Unable to decode audio data
    this.context.decodeAudioData(this.audioArray).then((buffer)=>{
        this.buf = buffer;
        this.play();
    }).catch((error)=>{
        console.log(error);
    });
    console.log(this.audioArray);


play() {
    let source = this.context.createBufferSource();
    source.buffer = this.buf;
    source.connect(this.context.destination);
    source.start(0);
}

And I am getting the array in ngOnInit function by calling the rest API:)

 this.radioService.generateVoiceMethode().subscribe(res => {
        console.log(res);
        this.audioArray = new ArrayBuffer(res.byteLength);
        this.audioArray = res;
        console.log(this.audioArray);
    });

Upvotes: 1

Views: 3090

Answers (1)

user1223879
user1223879

Reputation: 133

Though this is an old question, I am sharing an answer that worked for me. May be useful for some one in the future.

async play(data: ArrayBuffer) {
    const context = new AudioContext();
    const buffer = await context.decodeAudioData(data);
    const source = context.createBufferSource();
    source.buffer = buffer;
    source.connect(context.destination);
    source.start();
  }

The code above works in Angular 8.

Upvotes: 2

Related Questions