How to convert ArrayBuffer to AudioBuffer?

Question

I am streaming an arrayBuffer to convert to an audioBuffer in order to be able to listen to it.

I am receiving a stream via a websocket event

retrieveAudioStream(){
  this.socket.on('stream', (buffer) => {
    console.log('buffer', buffer)
  })
}

the buffer is an arrayBuffer and I need it to be an audioBuffer in order to be able to listen to it on my application.

How can I do this?

Applegate

Take a look at this: developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/… – Gleiwitz

According to this SO post #38590114 "AudioContext.decodeAudioData just isn't designed to decode partial files". Due to my stream being arrayBuffer chunks, I am not able to decode it with this method. Any other suggestions? – Applegate

There is a very great example that uses MediaSource (which works the same for audio streams) and I use it for streaming audio chunkwise from a 206 response, it works very well. – Achromatin

This might help as well. It's using decodeAudioData to decode the ArrayBuffer in an AudioBuffer and appends the chunks together. #14144152 – Nuptials

Answer 1

You can use BaseAudioContext.createBuffer() method. It is used to

create a new, empty AudioBuffer object, which can then be populated by data, and played via an AudioBufferSourceNode

See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createBuffer

Fiveandten

AudioBuffer objects require Float32Arrays, which is not what the OP has (ArrayBuffers representing chunks of data). Is there a method to convert ArrayBuffers of data chunks into AudioBuffers? – Hildehildebrand

I believe you can create any typed array from ArrayBuffer. So you must be able to convert ArrayBuffer into Float32Array – Fiveandten

Answer 2

Since you're streaming media rather than downloading the file and then decoding the audio data, AudioContext.createMediaStreamSource() will be much better suited for your usecase.

Read more here https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaStreamSource

Alexei