Audio panner

html JavaScript
<input type="range" id="volumefasdfsffpqwjfoqwifqwef98" min="0" max="2" value="1" list="gain-vals" step="0.01" />
<datalist id="gain-vals">
	<option value="0" label="min">
	<option value="2" label="max">
</datalist>
<label for="volumefasdfsffpqwjfoqwifqwef98">VOL</label>

<input type="range" id="pannerfasdfsffpqwjfoqwifqwef98" list="pan-vals" min="-1" max="1" value="0" step="0.01" />
<datalist id="pan-vals">
	<option value="-1" label="left">
	<option value="1" label="right">
</datalist>
<label for="pannerfasdfsffpqwjfoqwifqwef98">PAN</label>
<audio id="audiofasdfsffpqwjfoqwifqwef98" src="https://dept-info.labri.fr/~thibault/a-audio/C'est%20l'histoire%20d'un%20A%20-%20mp3/03%20Et%20une%20couche%20de%20TTY.mp3"></audio>
<button id="btnfasdfsffpqwjfoqwifqwef98">click</button>

<script type="text/javascript">
document.querySelector('#btnfasdfsffpqwjfoqwifqwef98').addEventListener('click', function() {
	const AudioContext = window.AudioContext || window.webkitAudioContext;
	const audioElement = document.querySelector('#audiofasdfsffpqwjfoqwifqwef98');
	let audioCtx;
  if(!audioCtx) {
		audioCtx = new AudioContext();
		let track = audioCtx.createMediaElementSource(audioElement);
                //let myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 2.0, audioCtx.sampleRate);

                //for (let channel = 0; channel < 2; channel++)
                //  for (let i = 0; i < audioCtx.sampleRate * 2.0; i++) myArrayBuffer.getChannelData(channel)[i] = Math.random() * 2 - 1;

                //let track = audioCtx.createBufferSource();
                //track.buffer = myArrayBuffer;
		// volume
		const gainNode = audioCtx.createGain();

		const volumeControl = document.querySelector('#volumefasdfsffpqwjfoqwifqwef98');
		volumeControl.addEventListener('input', function() {
			gainNode.gain.value = this.value;
		}, false);

		// panning
		const pannerOptions = { pan: 0 };
		const panner = new StereoPannerNode(audioCtx, pannerOptions);

		const pannerControl = document.querySelector('#pannerfasdfsffpqwjfoqwifqwef98');
		pannerControl.addEventListener('input', function() {
			panner.pan.value = this.value;
		}, false);

		// connect our graph
		track.connect(gainNode).connect(panner).connect(audioCtx.destination);
  //track.start();
	}
	audioElement.play();
})
</script>
VOL PAN