JSFiddle - React, Tailwind, and code Playground

JavaScript

var context = new AudioContext
    , channelSplitter = context.createChannelSplitter(2)
    , channelMerger = context.createChannelMerger(4)
    , bufferSource = context.createBufferSource()
    , muted1 = context.createGain()
    , muted2 = context.createGain()
    , scriptProcessor = context.createScriptProcessor(1024, 4, 4)
    , buffer = context.createBuffer(2, 100, context.sampleRate)

  buffer.getChannelData(0)[0] = 11
  buffer.getChannelData(1)[0] = 22
  bufferSource.buffer = buffer
  bufferSource.start(0)

  muted1.gain.value = 0
  muted2.gain.value = 0
  
  // This should split the 2 channels from the BufferSourceNode, and mix it 
  // to a 4 channels stream :
  // Channel 1 ->  Channel 1 from buffer
  // Channel 2 -> empty
  // Channel 3 -> empty
  // Channel 4 -> Channel 2 from the buffer
  bufferSource.connect(channelSplitter, 0, 0)
  channelSplitter.connect(channelMerger, 0, 0)
  muted1.connect(channelMerger, 0, 1)
  muted2.connect(channelMerger, 0, 2)
  channelSplitter.connect(channelMerger, 1, 3)
  channelMerger.connect(scriptProcessor, 0, 0)

  // This is just to log the content of the 4 channels
  scriptProcessor.connect(context.destination)
  scriptProcessor.onaudioprocess = function(event) {
    document.body.innerHTML = ''
      + [].slice.call(event.inputBuffer.getChannelData(0), 0, 10).join(',')
      + '</br>' + [].slice.call(event.inputBuffer.getChannelData(1), 0, 10).join(',')
      + '</br>' + [].slice.call(event.inputBuffer.getChannelData(2), 0, 10).join(',')
      + '</br>' + [].slice.call(event.inputBuffer.getChannelData(3), 0, 10).join(',')
    scriptProcessor.onaudioprocess = null
  }