Javascript 自定义html 5播放器多个曲目不起作用

我正在尝试在我的网站上创建多个自定义javascript音频播放器，但是一旦我在html中复制了代码，第二个播放器就不工作了，我应该如何调整javascript代码使其工作？这是我的密码： 下面是我所说的代码的相关部分：

html相关部分，我试图复制这一部分并更改音频源，但一旦我这样做，第二个播放器就会出现，但它不会触发javascript

<script>
         function durationchange() {
            var duration = $('audio')[0].duration;
            if(!isNaN(duration)) {
                $('#duration').html(Math.ceil(duration));
            }
          }
      </script>
      <div id="audioWrapper">
         <audio id="audioPlayer" preload="metadata">
            <source src="assets/millriver.wav" type="audio/wav" />
            Your browser does not support the audio element.
         </audio>
         <div id="playPause" class="play"></div>
         <div id="trackArtwork"><img src="assets/smiths.jpg" /></div>
         <div id="trackArtist">04/28/2021, 8PM Eastern Time, Mill River</div>
         <div id="trackTitle">41°20'09.3"N 72°54'37.7"W</div>
         <div id="trackProgress">
            <div id="elapsedTime"></div>
            <input type="range" id="scrubBar" value="0" max="100" />
            <div id="remainingTime"></div>
         </div>
      </div>
      
      <script type="text/javascript" src="js/audioplayer.js"></script>

---

谢谢

大家好，欢迎光临！如果您在这里发布相关的源代码，或者创建一个新的源代码（也为了便于跟踪），那将是非常好的。谢谢非常感谢。我刚刚在这里上传了代码：-）

var audioPlayer   = document.getElementById('audioPlayer');
var scrubBar      = document.getElementById('scrubBar');
var elapsedTime   = document.getElementById('elapsedTime');
var remainingTime = document.getElementById('remainingTime');
var playPause     = document.getElementById('playPause');
var trackLength;


// Set up a listener so we can get the track data once it's loaded
audioPlayer.addEventListener('loadedmetadata', function() {
  // Get the length for the current track
  trackLength = Math.round(audioPlayer.duration);

  // Set the initial elapsed and remaining times for the track
  elapsedTime.innerHTML   = formatTrackTime(audioPlayer.currentTime);
  remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime);
});

function runWhenLoaded() { /* read duration etc, this = audio element */ }



// Set up a listener to watch for play / pause and display the correct image
playPause.addEventListener('click', function() {
  // Let's check to see if we're already playing
  if (audioPlayer.paused) {
    // Start playing and switch the class to show the pause button
    audioPlayer.play();
    playPause.className = 'pause';
  } else {
    // Pause playing and switch the class to show the play button
    audioPlayer.pause();
    playPause.className = 'play';
  }
});

// Track the elapsed time for the playing audio
audioPlayer.ontimeupdate = function() {
  // Update the scrub bar with the elapsed time
  scrubBar.value = Math.floor((100 / trackLength) * audioPlayer.currentTime);

  // Update the elapsed and remaining time elements
  elapsedTime.innerHTML   = formatTrackTime(audioPlayer.currentTime);
  remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime + 1);
};

// Set up some listeners for when the user changes the scrub bar time
// by dragging the slider or clicking in the scrub bar progress area
scrubBar.addEventListener('input', function() {
  changeTrackCurrentTime();
  scrubBar.addEventListener('change', changeTrackCurrentTime);
});
scrubBar.addEventListener('change', function() {
  changeTrackCurrentTime();
  scrubBar.removeEventListener('input', changeTrackCurrentTime);
}); 

// Change the track's current time to match the user's selected time
var changeTrackCurrentTime = function() {
  audioPlayer.currentTime = Math.floor((scrubBar.value / 100) * trackLength);
};

// Format the time so it shows nicely to the user
function formatTrackTime(timeToFormat) {
  var minutes = Math.floor((timeToFormat) / 60);
  var seconds = Math.floor(timeToFormat % 60);
  seconds = (seconds >= 10) ? seconds : '0' + seconds;
  return minutes + ':' + seconds;
}

// Let's reset everything once the track has ended
audioPlayer.addEventListener('ended', function() {
  audioPlayer.currentTime = 0;
  elapsedTime.innerHTML   = formatTrackTime(audioPlayer.currentTime);
  remainingTime.innerHTML = '-' + formatTrackTime(trackLength - audioPlayer.currentTime);
  playPause.className = 'play';
});