如何从音轨中获取 ArrayBuffer？

Question

I need to join multiples audio tracks in js and I need to get a ArrayBuffer to do audioContext.decodeAudioData(). How can I do this?

that's the code:

 let tracks = []
  streamsAudio.forEach((track) => {
    let elem = document.createElement('audio')
    elem.srcObject = track.src
    elem.play()

    tracks.push(track.src.getAudioTracks()[0])
  })


 const ac = new AudioContext();
 
ac.decodeAudioData(ArrayBuffer, function(data) {
 })
 
   

    

Answer 1

It's not clear why you need an ArrayBuffer so you can decode the data. The audio tag can already decode the audio for you.

One way is to attach your audio element to a MediaElementAudioSourceNode . Connect this to ScriptProcessorNode or AudioWorkletNode to get the data from the individual tracks. A quick sketch (untested):

// Make elem global instead of local for this to work.  Then
let s = new MediaElementAudiouSourceNode(ac, {mediaElement: elem});
// 8192 is just an example.  You could choose other values
let spn = ac.createScriptProcessorNode(8192, <number of channels>, 0);
spn.onaudioprocess = (e) => {
  let input = e.inputBuffer;
  for (let k = 0; k < input.length; ++k) {
    let channel = input.getChannelData(k);
    // channel has one channel from the tracks.  Process it as you see
    // fit.
  }
}

s.connect(spn).connect(ac.destination);

You will have to determine the number of channels for the script processor. It may not be the same as the the number of tracks if a track contains, say, stereo audio.