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

Question

我正在尝试在我的网站上创建多个自定义 javascript 音频播放器，但是一旦我将代码复制到 html 中，第二个播放器就无法正常工作，我应该如何调整 javascript 代码以使其正常工作？这是我的代码： https ://github.com/streamofstream/streamofstream.github.io 这是我正在谈论的代码的相关部分：

index.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>

和这里的 java 脚本（代码由https://github.com/jon-dean/html5-audio-player提供）

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';
});

谢谢

标签： javascripthtmlaudiomedia-player