JSFiddle - React, Tailwind, and code Playground

HTML

<audio src="music.mp3" controls autoplay id="player" preload></audio>
<br />
<label for="left">Left channel</label>
<input type="range" min=0 max=1 step=.01 value=1 id="left" />
<br />
<label for="right">Right channel</label>
<input type="range" min=0 max=1 step=.01 value=1 id="right" />
<br />
<audio controls autoplay id="listener"></audio>

JavaScript

window.context = new AudioContext();
window.source = context.createMediaElementSource(document.getElementById('player'));
//the code below is for the panning sliders to change the output of the channelMerger, and to see wether the created stream uses stereo
window.splitter = context.createChannelSplitter(2);
source.connect(splitter);
window.merger = context.createChannelMerger(2);
window.leftGain = context.createGain();
window.rightGain = context.createGain();
splitter.connect(leftGain, 0, 0);
splitter.connect(rightGain, 1, 0);
leftGain.connect(merger, 0, 0);
rightGain.connect(merger, 0, 1);
var leftRange = document.querySelector('#left');
var rightRange = document.querySelector('#right');
leftRange.oninput = function () {
    leftGain.gain.value = this.value
}
rightRange.oninput = function () {
    rightGain.gain.value = this.value
}
//end panning code

window.streamNode = context.createMediaStreamDestination();
merger.connect(streamNode, 0, 0);

document.querySelector('#listener').src = URL.createObjectURL(streamNode.stream);