多个音频播放器仅播放第一个音频样本？

Question

我创建了一个音频播放器循环，我希望他们都播放各自的音频文件。由于某些原因，他们只玩过第一个。有人能帮我吗？我不知道为什么它不起作用。我敢肯定这很简单，但是我到处都是。

我制作了这个codepen来演示问题

JavaScript：

var audio_player = $("#audio-player");
var play_button = $('.play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;

player.onloadedmetadata = function() {
  duration = player.duration;
  progress_bar.progressbar("option", {
    'max': duration
  });
};

player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
  progress_bar.progressbar('value', player.currentTime);
  time.text(getTime(player.currentTime));
}, false);

function getTime(t) {
  var m = ~~(t / 60),
    s = ~~(t % 60);
  return (m < 10 ? "0" + m : m) + ':' + (s < 10 ? "0" + s : s);
}

function getProgressBarClickInfo(progress_bar, e) {
  var offset = progress_bar.position();
  var x = e.pageX - offset.left; // or e.offsetX (less support, though)
  var y = e.pageY - offset.top; // or e.offsetY
  var max = progress_bar.progressbar("option", "max");
  var value = x * max / progress_bar.width();

  return {
    x: x,
    y: y,
    max: max,
    value: value
  };
}

volume_bar.progressbar({
  value: player.volume * 100,
});

volume_bar.click(function(e) {
  var info = getProgressBarClickInfo($(this), e);
  volume_bar.progressbar('value', info.value);
  player.volume = info.value / info.max;
});

progress_bar.progressbar({
  value: player.currentTime,
});

progress_bar.click(function(e) {
  var info = getProgressBarClickInfo($(this), e);
  player.currentTime = player.duration / info.max * info.value;
});

play_button.click(function() {
    player[player.paused ? 'play' : 'pause']();
    $(this).closest('.audio-box')
           .find('.play')
           .toggleClass("fa-pause", !player.paused)
           .toggleClass("fa-play", player.paused);
});
mute_button.click(function() {
  if (player.volume == 0) {
    player.volume = volume;
  } else {
    volume = player.volume;
    player.volume = 0;
  }

  volume_bar.progressbar('value', player.volume * 100);

  $(this).toggleClass("fa-volume-up", player.volume != 0);
  $(this).toggleClass("fa-volume-off", player.volume == 0);
});

more_info.click(function() {
  audio_player.animate({
    height: (audio_player.height() == 50) ? 100 : 50
  }, 1000);
});

HTML：

<div class="grid" style="position: relative; height: 290px;">


    

    <div class="audio-box  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 1</h2>
            <p>some text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="183.719184" aria-valuenow="23.713634"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="display: block; width: 15%;"></div></div>
                    <span id="time" class="time">00:23</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"><div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 77%;"></div></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>


    

    <div class="audio-box  category-2  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 2</h2>
            <p>Some Text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="http://ccmixter.org/content/djlang59/djlang59_-_Erase_Racism.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar"></div>
                    <span id="time" class="time">00:00</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume"></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>


    

    <div class="audio-box  category-2  uncategorised  " >

        <div class="audio-btn">
            
        </div>
        <div class="audio-content">
            
            <h2>Audio 3</h2>
            <p>Some Text</p>
        </div>
        <div style="clear:both;"></div>
        <div class="play-wrap">
            <audio id="player" class="music">
                <source src="http://ccmixter.org/content/djlang59/djlang59_-_Breathe_-_BLM_Mix.mp3" type="audio/mpeg">
            </audio>

            <div id="audio-player">
                <div id="controls">
                    <i id="play" class="play fa fa-play" aria-hidden="true"></i>
                    <div id="progressbar"></div>
                    <span id="time" class="time">00:00</span>
                    <i id="mute" class="fa fa-volume-up" aria-hidden="true"></i>
                    <div id="volume"></div>
                </div>

            </div>
            <i class="play fa fa-play" aria-hidden="true"></i>

        </div>





    </div>
    

</div>