Web Audio API

//   
const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

<audio src="myCoolTrack.mp3"></audio>

//   
const audioElement = document.querySelector("audio");

//     
const track = audioContext.createMediaElementSource(audioElement);

<button data-playing="false" role="switch" aria-checked="false">
  <span>Play/Pause</span>
</button>

track.connect(audioContext.destination);

//   
const playButton = document.querySelector("button");

playButton.addEventListener(
  "click",
  function () {
    //  (suspended)    (  )
    if (audioContext.state === "suspended") {
      audioContext.resume();
    }

    //     
    if (this.dataset.playing === "false") {
      audioElement.play();
      this.dataset.playing = "true";
    } else if (this.dataset.playing === "true") {
      audioElement.pause();
      this.dataset.playing = "false";
    }
  },
  false,
);

audioElement.addEventListener(
  "ended",
  () => {
    playButton.dataset.playing = "false";
  },
  false,
);

const gainNode = audioContext.createGain();

track.connect(gainNode).connect(audioContext.destination);

<input type="range" id="volume" min="0" max="2" value="1" step="0.01" />

const volumeControl = document.querySelector("#volume");

volumeControl.addEventListener(
  "input",
  function () {
    gainNode.gain.value = this.value;
  },
  false,
);

const pannerOptions = { pan: 0 };
const panner = new StereoPannerNode(audioContext, pannerOptions);

<input type="range" id="panner" min="-1" max="1" value="0" step="0.01" />

const pannerControl = document.querySelector("#panner");

pannerControl.addEventListener(
  "input",
  function () {
    panner.pan.value = this.value;
  },
  false,
);

track.connect(gainNode).connect(panner).connect(audioContext.destination);