Using JQueryUI as an audio Seek control, and rebinding a new slider to the same <audio> control when a song is changed

Answer to the Stack Overflow question: http://stackoverflow.com/questions/37501717/using-jqueryui-as-an-audio-seek-control-and-rebinding-a-new-slider-to-the-same

by Michael Gaskill

HTML

<script src="https://use.fontawesome.com/2748f851ad.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<body>
  <div class="container mainContent">
    <div class="row">
      <div class='col-md-12'>
        <div class="row">
          <div class='col-md-12 songListItem'>Song 1</div>
        </div>
        <div class="row">
          <div class='col-md-12 songListItem'>Song 2</div>
        </div>
      </div>
    </div>
    <!-- /.Main song list -->
  </div>
  <!-- /.Main content-->

  <nav class="navbar navbar-default navbar-fixed-bottom bottomNav">
    <div class="playButton fa fa-play-circle-o fa-5x"></div>
  </nav>
  <!-- /.bottom controls -->

  <audio controls id="player" class="hidden">
    Your browser does not support the audio element.
  </audio>
  <!-- /.hidden audio controls -->
</body>

CSS

.hidden{
    display: none;
}

.slider, .volume {
	width:65%;

	display: block;

	text-align:bottom;
	margin-top: 24px;
}

JavaScript

var playButton = $(".playButton");
var audioPlayer = $("#player").get(0);
var duration = 0;
var manualSeek = false;

function zeroPad(num) {
    return num < 10 ? "0" + num : num;
}

function formatTime(time) {
    return zeroPad(~~(time/60))+':'+zeroPad(~~(time % 60));
}

audioPlayer.onloadedmetadata = function() {
    duration = player.duration;
    $(".slider").slider("option", { max: Math.floor(duration) });
    console.log("Duration: ", duration);
};

audioPlayer.onended = function() {
  playButton.removeClass('fa-pause-circle-o');
  playButton.addClass('fa-play-circle-o');
};

audioPlayer.volume = 0.75;

function rebindControls(selectedSong) {
  $('.slider, .volume, .text').remove(); // Remove all sliders
  
  var row = selectedSong.parent();
  var sliderDiv = $("<div />").addClass("slider").appendTo(row);
  var volume = $("<div />").addClass("volume").appendTo(row);
  var time = $("<div />").addClass("time").appendTo(row);
  
  console.log("Duration: ", audioPlayer.duration);

  sliderDiv.slider({
      orientation: "horizontal",
      range: "min",
      min: 0,
      step: 0.1,
      animate: true,
      slide: function() {
        manualSeek = true;
      },
      stop: function(e, ui) {
        manualSeek = false;
        audioPlayer.currentTime = ui.value;
      }
  });

  volume.slider({
    value : audioPlayer.volume*100,
    slide : function(ev, ui) {
        volume.css({ background:"hsla(1,0%,"+ui.value+"%,1)" });
        audioPlayer.volume = ui.value/100; 
    } 
  });

  $(audioPlayer).unbind('timeupdate');
  $(audioPlayer).bind('timeupdate', function () {
    var currentTime = audioPlayer.currentTime;
    time.text(formatTime(currentTime));
    if (!manualSeek) {
      sliderDiv.slider('value', currentTime);
    }
  });
} 

$('.songListItem').click(function() {
  loadSong($(this));
  rebindControls($(this));
  playButton.click();
});

function setUIState() {
  if (audioPlayer.paused || audioPlayer.ended) {
   ...