JSFiddle - React, Tailwind, and code Playground

HTML

<p id="log" style="white-space:pre"></p>

JavaScript

var audioSource, aStream, recorder;

var startAudio = () => {

  let xhr = new XMLHttpRequest();
  xhr.responseType = 'arraybuffer';
  xhr.onload = () => {

    let audioCtx = new AudioContext();
    audioSource = audioCtx.createBufferSource();

    audioCtx.decodeAudioData(xhr.response).then((buffer) => {

      audioSource.buffer = buffer;
      audioSource.loop = true;
      audioSource.connect(audioCtx.destination);
      let dest = audioCtx.createMediaStreamDestination()
      audioSource.connect(dest)
      audioSource.start(0);

      aStream = dest.stream;

      startGum();

    })

  }
  xhr.open('get', 'https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3');
  xhr.send();

};

var startGum = () => navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  })
  .then(vStream => record(vStream));

var record = (vStream) => {

  vStream.removeTrack(vStream.getAudioTracks()[0]);
  vStream.addTrack(aStream.getAudioTracks()[0]);

  let chunks = [];
  let recorder = new MediaRecorder(vStream);
  recorder.onstop = () => exportMedia(new Blob(chunks));
  recorder.ondataavailable = (e) => {
    chunks.push(e.data)
  };

  let stop = () => {

    recorder.stop();
    vStream.getTracks().forEach(track => track.stop());
    audioSource.stop(0);

  };

  setTimeout(stop, 3000);

  recorder.start();
  let rStream = recorder.stream;

  log.textContent = `vStream's audioTrack id: ${vStream.getAudioTracks()[0].id}\n\r` +
    `aStream's audioTrack id: ${aStream.getAudioTracks()[0].id}\n\r` +
    `rStream's audioTrack id: ${rStream.getAudioTracks()[0].id}`

  console.log(vStream.getAudioTracks(), aStream.getAudioTracks(), rStream.getAudioTracks());

};

var exportMedia = (blob) => {

  let vid = document.createElement('video');
  vid.controls = true;
  vid.src = URL.createObjectURL(blob);
  document.body.appendChild(vid);

};

startAudio();