title: MediaRecorder: Record from Microphones and Play audio from Element (music playback)
body: <p>I like to record my voice with some mp3 music that I choose from the video tag, When I change the src audio element, the new music doesn't record, MediaRecorder just records the first music, so I like to record all music coming from the video tag src.
  let constraintObj = {
  audio: 1,
  video: 0}</p>
  <pre><code>navigator.mediaDevices
    .getUserMedia(constraintObj)
    .then((mediaStreamObj) =&gt; {
      let start = document.getElementById(&quot;btnStart&quot;);
      let stop = document.getElementById(&quot;btnStop&quot;);
      let autostop = document.getElementById(&quot;autobtnStop&quot;);
      let playAudio = document.getElementById(&quot;pma&quot;);
      var playAudioStream = playAudio.captureStream();
      let audioContext = new AudioContext();
      const acsource = audioContext.createMediaElementSource(playAudio);
      acsource &amp;&amp; acsource.connect(audioContext.destination);
      let dest = audioContext.createMediaStreamDestination();
      let audioIn_01 = audioContext.createMediaStreamSource(mediaStreamObj);
      let audioIn_02 = audioContext.createMediaStreamSource(playAudioStream);
      audioIn_01.connect(dest);
      audioIn_02 &amp;&amp; audioIn_02.connect(dest);
      let mediaRecorder = new MediaRecorder(dest.stream);
      let chunks = [];
  
      start.addEventListener(&quot;click&quot;, () =&gt; {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
      });
      stop.addEventListener(&quot;click&quot;, () =&gt; {
        mediaRecorder.stop();
      });
      autostop.addEventListener(&quot;click&quot;, () =&gt; {
        if (mediaRecorder.state !== &quot;inactive&quot;) {
          mediaRecorder.stop();
        }
      });
      mediaRecorder.ondataavailable = (ev) =&gt; {
        chunks.push(ev.data);
        if (selectedEpisodes !== null &amp;&amp; sameDate &lt;= 0) {
          let blobFile = new Blob(chunks, { type: &quot;audio/ogg; codecs=opus&quot; });
          chunks = [];
          const datas = {
            name,
            episode_id,
            record_datetime: record_datetime,
            playtime_sec: playtime_sec,
            files: blobFile,
          };
          dispatch(editEpisodeStatus(epSelected_ID, { status: &quot;finished&quot; }));
          dispatch(createPodcast(datas));
        }
      };
      mediaRecorder.onstop = () =&gt; {
        let blobFile = new Blob(chunks, { type: &quot;audio/ogg; codecs=opus&quot; });
        chunks = [];
        const datas = {
          name,
          episode_id,
          record_datetime: record_datetime,
          playtime_sec: playtime_sec,
          files: blobFile
        };
        dispatch(editEpisodeStatus(epSelected_ID, { status: &quot;finished&quot; }));
        dispatch(createPodcast(datas));
      };
    })
    .catch((err) =&gt; {
      console.log(&quot;catch startLive&quot;, err.name, err.message);
    });
  </code></pre>
  <p>Hi, I like to record my voice with some mp3 music that I choose from the video tag, When I change the src audio element, the new music doesn't record, MediaRecorder just records the first music, so I like to record all music coming from the video tag src.</p>