Audio player works on codepen, but not anywhere else

Question

I'm writing a simple website with an audio player. I want all the code to be in separate html/css file to reference it quickly on multiple pages. The player is inside a navigation element. Newsletter form also suffers from the same problem, it works locally, but not when hosted.

Firstly, here is a codepen containing a properly working player - https://codepen.io/terramsc/pen/YzerzYw

And here is how I implemented in on my page. It's hosted on github - https://terramsc.github.io/stash/

index.html (main page)

<div id="navigation-wrap"></div>
<script src="JS/navigation.js" type="text/javascript"></script>

navigation.js

$(function(){
  $("#navigation-wrap").load("navigation.html");
});

navigation.html

<link rel="stylesheet" href="CSS/player.css">

<!-- NAVIGATION POPUPS -->

<div class="pops">
  <div class="logotype-small"><img src="https://i.imgur.com/vhVfgRN.png"></div>
  <div class="content">
    <div class="content-wrap">
      <div class="post">
        <h3></h3>
        <h2></h2>
        <p>No content.</p>
      </div>
    </div>
  </div>
  <button class="cls-pop"></button>
</div>

<div class="nwsletter-content">
  <div class="logotype-small"><img src="https://i.imgur.com/vhVfgRN.png"></div>
  <button class="cls-pop"></button>
  <div class="ml-embedded" data-form="Zm6WMb"></div>
</div>

<!-- NAVIGATION BUTTONS -->

<div id="navigation">

  <button class="navigation-button-info"></button>

<!-- AUDIO PLAYER -->

  <div id="player">

    <div id="color-switch"><img src="https://i.imgur.com/SYyiJUa.png">

      <div id="volume-slider-container">
        <output id="volume-output">100</output>
        <div id="volume-slider-squish">
          <input type="range" id="volume-slider" max="100" value="70">
        </div>
        <button id="mute-icon"></button>
      </div>

      <div id="audio-player-container">
        <audio src="https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3" preload="metadata" loop></audio>

        <button id="play-icon"></button>
        <span id="current-time" class="time">0:00</span>
        <input type="range" id="seek-slider" max="100" value="0">
        <span id="duration" class="time">0:00</span>

      </div>
    </div>
  </div>

  <button class="navigation-button-nwsletter"></button>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
  $(document).ready(function() {
    $('.navigation-button-info').click(function() {
      $('.pops').fadeIn();
    });
    $('.cls-pop').click(function() {
      $('.pops').fadeOut();
    });
  });
</script>

<script>
  $(document).ready(function() {
    $('.navigation-button-nwsletter').click(function() {
      $('.nwsletter-content').fadeIn();
    });
    $('.cls-pop').click(function() {
      $('.nwsletter-content').fadeOut();
    });
  });
</script>

<script>
  /* Implementation of the presentation of the audio player */
  import lottieWeb from 'https://cdn.skypack.dev/lottie-web';

  const player = document.querySelector('#player')
  const playIconContainer = document.getElementById('play-icon');
  const audioPlayerContainer = document.getElementById('audio-player-container');
  const seekSlider = document.getElementById('seek-slider');
  const volumeSlider = document.getElementById('volume-slider');
  const muteIconContainer = document.getElementById('mute-icon');
  let playState = 'play';
  let muteState = 'unmute';

  const playAnimation = lottieWeb.loadAnimation({
    container: playIconContainer,
    path: 'https://assets7.lottiefiles.com/packages/lf20_vbkmvxki.json',
    renderer: 'svg',
    loop: false,
    autoplay: false,
    name: "Play Animation",
  });

  const muteAnimation = lottieWeb.loadAnimation({
      container: muteIconContainer,
      path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/mute/mute.json',
      renderer: 'svg',
      loop: false,
      autoplay: false,
      name: "Mute Animation",
  });

  playAnimation.goToAndStop(10, true);

  playIconContainer.addEventListener('click', () => {
      if(playState === 'play') {
          audio.play();
          playAnimation.playSegments([40, 42], true);
          requestAnimationFrame(whilePlaying);
          playState = 'pause';
      } else {
          audio.pause();
          playAnimation.playSegments([10, 12], true);
          cancelAnimationFrame(raf);
          playState = 'play';
      }
  });

  muteIconContainer.addEventListener('click', () => {
      if(muteState === 'unmute') {
          muteAnimation.playSegments([0, 15], true);
          audio.muted = true;
          muteState = 'mute';
      } else {
          muteAnimation.playSegments([15, 25], true);
          audio.muted = false;
          muteState = 'unmute';
      }
  });

  const showRangeProgress = (rangeInput) => {
      if(rangeInput === seekSlider) player.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
      else player.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
  }

  seekSlider.addEventListener('input', (e) => {
      showRangeProgress(e.target);
  });
  volumeSlider.addEventListener('input', (e) => {
      showRangeProgress(e.target);
  });





  /* Implementation of the functionality of the audio player */

  const audio = document.querySelector('audio');
  const durationContainer = document.getElementById('duration');
  const currentTimeContainer = document.getElementById('current-time');
  const outputContainer = document.getElementById('volume-output');
  let raf = null;

  const calculateTime = (secs) => {
      const minutes = Math.floor(secs / 60);
      const seconds = Math.floor(secs % 60);
      const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
      return `${minutes}:${returnedSeconds}`;
  }

  const displayDuration = () => {
      durationContainer.textContent = calculateTime(audio.duration);
  }

  const setSliderMax = () => {
      seekSlider.max = Math.floor(audio.duration);
  }

  const displayBufferedAmount = () => {
      const bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
      player.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);
  }

  const whilePlaying = () => {
      seekSlider.value = Math.floor(audio.currentTime);
      currentTimeContainer.textContent = calculateTime(seekSlider.value);
      player.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
      raf = requestAnimationFrame(whilePlaying);
  }

  if (audio.readyState > 0) {
      displayDuration();
      setSliderMax();
      displayBufferedAmount();
  } else {
      audio.addEventListener('loadedmetadata', () => {
          displayDuration();
          setSliderMax();
          displayBufferedAmount();
      });
  }

  audio.addEventListener('progress', displayBufferedAmount);

  seekSlider.addEventListener('input', () => {
      currentTimeContainer.textContent = calculateTime(seekSlider.value);
      if(!audio.paused) {
          cancelAnimationFrame(raf);
      }
  });

  seekSlider.addEventListener('change', () => {
      audio.currentTime = seekSlider.value;
      if(!audio.paused) {
          requestAnimationFrame(whilePlaying);
      }
  });

  volumeSlider.addEventListener('input', (e) => {
      const value = e.target.value;

      outputContainer.textContent = value;
      audio.volume = value / 100;
  });




  /* Implementation of the Media Session API */
  if('mediaSession' in navigator) {
      navigator.mediaSession.metadata = new MediaMetadata({
          title: 'Komorebi',
          artist: 'Anitek',
          album: 'MainStay',
          artwork: [
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '96x96', type: 'image/png' },
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '128x128', type: 'image/png' },
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '192x192', type: 'image/png' },
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '256x256', type: 'image/png' },
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '384x384', type: 'image/png' },
              { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '512x512', type: 'image/png' }
          ]
      });
      navigator.mediaSession.setActionHandler('play', () => {
          if(playState === 'play') {
              audio.play();
              playAnimation.playSegments([14, 27], true);
              requestAnimationFrame(whilePlaying);
              playState = 'pause';
          } else {
              audio.pause();
              playAnimation.playSegments([0, 14], true);
              cancelAnimationFrame(raf);
              playState = 'play';
          }
      });
      navigator.mediaSession.setActionHandler('pause', () => {
          if(playState === 'play') {
              audio.play();
              playAnimation.playSegments([14, 27], true);
              requestAnimationFrame(whilePlaying);
              playState = 'pause';
          } else {
              audio.pause();
              playAnimation.playSegments([0, 14], true);
              cancelAnimationFrame(raf);
              playState = 'play';
          }
      });
      navigator.mediaSession.setActionHandler('seekbackward', (details) => {
          audio.currentTime = audio.currentTime - (details.seekOffset || 10);
      });
      navigator.mediaSession.setActionHandler('seekforward', (details) => {
          audio.currentTime = audio.currentTime + (details.seekOffset || 10);
      });
      navigator.mediaSession.setActionHandler('seekto', (details) => {
          if (details.fastSeek && 'fastSeek' in audio) {
            audio.fastSeek(details.seekTime);
            return;
          }
          audio.currentTime = details.seekTime;
      });
      navigator.mediaSession.setActionHandler('stop', () => {
          audio.currentTime = 0;
          seekSlider.value = 0;
          audioPlayerContainer.style.setProperty('--seek-before-width', '0%');
          currentTimeContainer.textContent = '0:00';
          if(playState === 'pause') {
              playAnimation.playSegments([0, 14], true);
              cancelAnimationFrame(raf);
              playState = 'play';
          }
      });
  }
</script>