При нажатии на кнопку play повторно, пауза не срабатывает, композиция не останавливается:

<!-- audio player -->
<div class="audio-player">
  <div class="audio-player-inner">
    <div class="audio-tracklist">
      <% tracks.forEach((track, index) => { %> 
        <div class="audio-track">
          <div class="audio-track-image">
            <img src="/img/<%= track.image_filename || 'default-track-image.png' %>" alt="<%= track.title %>">
            <div class="audio-track-image-overlay">
              <button class="audio-player-button" onclick="togglePlay(<%= index %>)">
                <i class="audio-player-icon fa fa-play"></i>
              </button>
            </div>
          </div>
          <div class="audio-track-info">
            <h4><%= track.title %></h4> 
            <p class="album-title"><%= track.album_title || "No Album" %></p>
          </div>
          <audio id="audio-<%= index %>" src="/tracks/<%= track.filename %>" ontimeupdate="updateProgress(<%= index %>)"></audio>
          <div class="audio-player-wrapper">
            <div class="audio-player-progress">
              <input type="range" id="progress-bar-<%= index %>" class="progress-bar" value="0" onchange="setProgress(<%= index %>, this.value)">
              <span class="progress-time" id="progress-time-<%= index %>">0:00</span>
            </div>
            <div class="audio-player-controls">
              <button class="audio-player-button" id="play-pause-<%= index %>" onclick="togglePlay(<%= index %>)">
                <i class="audio-player-icon fa fa-play"></i>
              </button>
              <button class="audio-player-button" id="stop-<%= index %>" onclick="stopAudio(<%= index %>)">
                <i class="audio-player-icon fa fa-stop"></i>
              </button>
            </div>
          </div>
        </div> 
      <% }); %>
    </div>
  </div>
</div>
<!-- end -->

js:
<script>
// audio player
const tracks = document.querySelectorAll('.audio-track');

function togglePlay(index) {
  const audio = document.querySelector(`#audio-${index}`);
  const playPauseBtn = document.querySelector(`#play-pause-${index}`);
  if (audio.paused) {
    if (audio.currentTime > 0) {
      audio.currentTime = 0;
    }
    audio.play();
    playPauseBtn.innerHTML = '<i class="audio-player-icon fa fa-pause"></i>';
  } else {
    audio.pause();
    playPauseBtn.innerHTML = '<i class="audio-player-icon fa fa-play"></i>';
  }
}

function stopAudio(index) {
  const audio = document.querySelector(`#audio-${index}`);
  const playPauseBtn = document.querySelector(`#play-pause-${index}`);
  audio.pause();
  audio.currentTime = 0;
  playPauseBtn.innerHTML = '<i class="audio-player-icon fa fa-play"></i>';
}

function updateProgress(index) {
  const audio = document.querySelector(`#audio-${index}`);
  const progressBar = document.querySelector(`#progress-bar-${index}`);
  const progressTime = document.querySelector(`#progress-time-${index}`);
  const duration = audio.duration;
  const currentTime = audio.currentTime;
  const progressPercent = (currentTime / duration) * 100;
  progressBar.value = progressPercent;
  let minutes = Math.floor(currentTime / 60);
  let seconds = Math.floor(currentTime % 60);
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  progressTime.innerHTML = `${minutes}:${seconds}`;
}

function setProgress(index, value) {
  const audio = document.querySelector(`#audio-${index}`);
  const progressBar = document.querySelector(`#progress-bar-${index}`);
  const progressTime = document.querySelector(`#progress-time-${index}`);
  const duration = audio.duration;
  audio.currentTime = (value / 100) * duration;
  let minutes = Math.floor(audio.currentTime / 60);
  let seconds = Math.floor(audio.currentTime % 60);
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }
  progressTime.innerHTML = `${minutes}:${seconds}`;
}

tracks.forEach((track, index) => {
  track.addEventListener('mouseover', () => {
    const audioTrackImageOverlay = track.querySelector('.audio-track-image-overlay');
    const audioPlayerWrapper = track.querySelector('.audio-player-wrapper');
    audioTrackImageOverlay.style.opacity = 1;
    audioPlayerWrapper.style.opacity = 1;
  });
  track.addEventListener('mouseout', () => {
    const audioTrackImageOverlay = track.querySelector('.audio-track-image-overlay');
    const audioPlayerWrapper = track.querySelector('.audio-player-wrapper');
    audioTrackImageOverlay.style.opacity = 0;
    audioPlayerWrapper.style.opacity = 0;
  });
  const audio = document.querySelector(`#audio-${index}`);
  audio.addEventListener('ended', () => {
    const playPauseBtn = document.querySelector(`#play-pause-${index}`);
    playPauseBtn.innerHTML = '<i class="audio-player-icon fa fa-play"></i>';
  });
});
</script>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	
	<script>
  const playButtons = document.querySelectorAll('.fa-play');
  playButtons.forEach((button, index) => {
    const audio = document.querySelector(`#audio-${index}`);
    button.addEventListener('click', () => {
      audio.play();
    });
  });
</script>