I am most certainly implementing this incorrectly. I want a simple instance of two or more sounds played back independently via WebAudio with a button for each sound. Play1() works; play5() does not. Any guidance would be greatly appreciated. Thank you.

<button onclick="play1()">I</button>

<script>
let faked = true;
if (!window.AudioContext && window.webkitAudioContext) {
  window.AudioContext = window.webkitAudioContext;
  faked = false;
}
const audioContext = new AudioContext();
let sample;


function play1() {
  if (!faked) {
    faked = true;
    const buffer = audioContext.createBuffer(1, 1, audioContext.sampleRate);
    sample = audioContext.createBufferSource();
    sample.buffer = buffer;
    sample.connect(audioContext.destination);
    sample.start();
  }
  
fetch('major/one.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    if (audioContext.decodeAudioData.length === 2) { // Safari
      return new Promise(resolve => {
        audioContext.decodeAudioData(arrayBuffer, buffer => { 
          resolve(buffer);
        });
      });
    } else {
      return audioContext.decodeAudioData(arrayBuffer);  
    }
  })
  .then(audioBuffer => {
    sample = audioContext.createBufferSource();
    sample.buffer = audioBuffer;
    sample.connect(audioContext.destination);
    sample.start();
  })
  .catch(e => console.error('uff', e));
}

function stop() {
  sample.stop();
}



<!--2nd sound -->
<button onclick="play5()">V</button>

Script from above is copied with function play5()

Again, any guidance is appreciated.