JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="start()">start</button>
<br>
<video id="video1" autoplay playsInline controls></video>
<video id="video2" autoplay playsInline controls></video>
<br>
<div id="log"></div>

JavaScript

async function start()
{
    await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 32000 }}).then(async stream => {
        log.innerHTML += JSON.stringify(stream.getAudioTracks()[0].getSettings()) + '<br>';
    		stream.getAudioTracks()[0].stop();
    });
    await new Promise(resolve => setTimeout(resolve, 2000));

    const context = new AudioContext();
    const oscillator = context.createOscillator();
    const streamDestination = context.createMediaStreamDestination();
    oscillator.connect(streamDestination);
    video1.srcObject = streamDestination.stream;
    await video1.play();
    oscillator.start();
    await new Promise(resolve => setTimeout(resolve, 2000));
    navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 32000 }}).then(async stream => {
        video2.srcObject = stream;
        stream.getAudioTracks()[0].onended = () => log.innerHTML += 'track ended' + '<br>';
        await new Promise(resolve => setTimeout(resolve, 1000));
        log.innerHTML += JSON.stringify(stream.getAudioTracks()[0].getSettings());
    });
}