多个音频播放器

Question

我正在尝试在同一页面上创建两个独立的音频播放器。我有一个播放器的工作代码，但是当我复制它以制作第二个播放器时它会破坏（我理解为什么）。有人建议我将它重写为构造函数，这是有道理的，但在这一点上超出了我的能力范围。

/* global $ */

var audio;

//Hide Pause
$('#pause').hide();

initAudio($('#playlist').find('li:first-child'));

// Initiate play sequence
function initAudio(element) {
  var song = element.attr('data-song');
  var title = element.text();

  //Create audio object
  audio = new Audio('public/audio/' + song);

  //Insert audio info
  $('.title').text(title);

  $('#playlist li').removeClass('active');
  element.addClass('active');

  // Set timer to 0
  $('#duration').html('0:00');

  // Maintain volume on song change
  audio.volume = $('#volume').val() / 100;

  //Play button
  $('#play').click(function() {
    audio.play();
    showPause();
    showDuration();
  });

  //Pause button
  $('#pause').click(function() {
    audio.pause();
    showPlay();
  });

  //Stop button
  $('#stop').click(function() {
    audio.pause();
    audio.currentTime = 0;
    showPlay();
  });

  //Next button
  $('#next').click(function() {
    audio.pause();
    var next = $('#playlist li.active').next();
    if (next.length == 0) {
      next = $('#playlist li:first-child');
    }
    showPause();
    initAudio(next);
    audio.play();
    showDuration();
  });

  //Prev button
  $('#prev').click(function() {
    audio.pause();
    var prev = $('#playlist li.active').prev();
    if (prev.length == 0) {
      prev = $('#playlist li:last-child');
    }
    showPause();
    initAudio(prev);
    audio.play();
    showDuration();
  });

  //Playlist song click
  $('#playlist li').click(function() {
    audio.pause();
    initAudio($(this));
    showPause();
    audio.play();
    showDuration();
  });

  //Volume control
  $('#volume').change(function() {
    audio.volume = parseFloat(this.value / 100);
  });

  // Show play button, hide pause
  function showPlay() {
    $('#play').show();
    $('#pause').hide();
  }

  // Show pause button, hide play
  function showPause() {
    $('#play').hide();
    $('#pause').show();
  }

  // Automatically play next song
  function autoPlayNext() {
    if (audio.currentTime == audio.duration) {
      var next = $('#playlist li.active').next();
      if (next.length == 0) {
        next = $('#playlist li:first-child');
      }
      showPause();
      initAudio(next);
      audio.play();
      showDuration();
    }
  }

  // Time/Duration
  function showDuration() {
    $(audio).bind('timeupdate', function() {
      //Get hours and minutes
      var s = parseInt(audio.currentTime % 60, 10);
      var m = parseInt(audio.currentTime / 60, 10) % 60;
      if (s < 10) {
        s = '0' + s;
      }
      $('#duration').html(m + ':' + s);
      var value = 0;
      if (audio.currentTime > 0) {
        value = Math.floor((100 / audio.duration) * audio.currentTime);
      }
      $('#progress').css('width', value + '%');

      autoPlayNext();
    });
  }

  // Skip time via progress bar click
  $('#progress-bar').bind('click', function(e) {
    var $div = $(e.target);

    var offset = $div.offset();
    var x = e.clientX - offset.left;

    audio.currentTime = ((x / 2.3) / (100 / audio.duration));
  });

<div id="audio-player">

  <p><span class="title"></span></p>

  <input title="volume" id="volume" type="range" min="0" max="100">

  <div id="buttons">
    <button title="previous" id="prev"> <i class="fa fa-step-backward" aria-hidden="true"></i></button>
    <button title="play" id="play"> <i class="fa fa-play-circle"   aria-hidden="true"></i></button>
    <button title="pause" id="pause"><i class="fa fa-pause-circle"  aria-hidden="true"></i></button>
    <button title="stop" id="stop"> <i class="fa fa-stop-circle"   aria-hidden="true"></i></button>
    <button title="next" id="next"> <i class="fa fa-step-forward"  aria-hidden="true"></i></button>
  </div>

  <div id="tracker">
    <div title="progress" id="progress-bar">
      <span id="progress"></span>
    </div>
    <span id="duration"></span>
  </div>

  <ul id="playlist">
    <li title="song_1" class="song-list active" data-id="song_1" data-song="song_1.mp3">Song 1
      <a href="/public/audio/song_1.mp3"></a>
    </li>
    <li title="song_2" class="song-list" data-id="song_2" data-song="song_2.mp3">Song 2
      <a href="/public/audio/song_2.mp3"></a>
    </li>
    <li title="song_3" class="song-list" data-id="song_3" data-song="song_3.mp3">Song 3
      <a href="/public/audio/song_3.mp3"></a>
    </li>
  </ul>

</div>

我不确定是否应该让第二组元素与对应的元素具有相同的类别，或者每个元素都使用唯一的ID进行标记。

我一直在努力弄清楚如何将其转换为构造函数，但我很难过。

有什么想法吗？