iPawd Music Player - JS

<script>
$(document).ready(function() {

  var myPlaylist = new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
  }, [{
    image: "<img src='http://s.mxmcdn.net/images-storage/albums/3/2/6/9/1/8/30819623_800_800.jpg'>",
    title: "Bodypop",
    artist: "Ken Water / Blogilates ft. TJ Carter",
    mp3: "https://dl.dropboxusercontent.com/s/17ymg2fzjnxpll0/Ken%20WatersBlogilates%20-%20BODYPOP%20%28ft.%20TJ%20Carter%29%20%28Lyrics%29%20%5BHD%5D.mp3?dl=0"
  },

  {
    image: "<img src='https://i1.sndcdn.com/artworks-000175351027-r5z2ph-t500x500.jpg'>",
    title: "Nice Swing",
    artist: "Ken Waters",
    mp3: "https://dl.dropboxusercontent.com/s/0npsctl29ym7g5j/Ken%20Waters%20-%20Nice%20Swing.mp3?dl=0"
  },

  {
      image:"<img src='https://f4.bcbits.com/img/a3258123251_10.jpg'>",
      title:"Dreams",
      artist:"Ken Waters ft. TJ Carter",
      mp3:"https://dl.dropboxusercontent.com/s/s8pyh8z0nqoqyhe/Ken%20Waters%20-%20Dreams%20ft.%20TJ%20Carter.mp3?dl=0"
  },


  {
      image:"<img src='http://clubtone.net/_ld/4361/436145.jpg'>",
      title:"XOXO",
      artist:"Ken Waters",
      mp3:"https://dl.dropboxusercontent.com/s/ymtepigt5p15ko3/Ken%20Waters%20-%20XOXO.mp3?dl=0"
  },

  {
      image:"<img src='https://f4.bcbits.com/img/a3258123251_10.jpg'>",
      title:"Go",
      artist:"Ken Waters ft. TJ Carter",
      mp3:"https://dl.dropboxusercontent.com/s/jt1ta2j07077o20/Ken%20Waters%20-%20Go%20ft.%20TJ%20Carter.mp3?dl=0"
  }],

  {
    swfPath: "../../dist/jplayer",
    supplied: "mp3",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true
  }); // end jplayer initiate

  /* ======== Other Audio Player Functions ======== */

  $("#jquery_jplayer_1").on(
    $.jPlayer.event.ready + ' ' + $.jPlayer.event.play,
    function(event) {

      /* === ENABLE PLAYLIST ==== */

      var current = myPlaylist.current;
      var playlist = myPlaylist.playlist;
      $.each(playlist, function(index, obj) {
        if (index == current) {
          $(".jp-now-playing-art").html("<div class='jp-image'>" + obj.image + "</div>");
          $(".jp-now-playing").html("<div class='jp-track-name'>" + obj.title + "</div> <div class='jp-artist-name'>" + obj.artist + "</div>");

        }
      });

      /* === VOLUME DRAGGING ==== */

      $('.jp-volume-bar').mousedown(function() {
          var parentOffset = $(this).offset(),
            width = $(this).width();
          $(window).mousemove(function(e) {
            var x = e.pageX - parentOffset.left,
              volume = x / width
            if (volume > 1) {
              $("#jquery_jplayer_1").jPlayer("volume", 1);
            } else if (volume <= 0) {
              $("#jquery_jplayer_1").jPlayer("mute");
            } else {
              $("#jquery_jplayer_1").jPlayer("volume", volume);
              $("#jquery_jplayer_1").jPlayer("unmute");
            }
          });
          return false;
        })
        .mouseup(function() {
          $(window).unbind("mousemove");
        });

      /* === ENABLE DRAGGING ==== */

      var timeDrag = false; /* Drag status */
      $('.jp-play-bar').mousedown(function(e) {
        timeDrag = true;
        updatebar(e.pageX);
      });
      $(document).mouseup(function(e) {
        if (timeDrag) {
          timeDrag = false;
          updatebar(e.pageX);
        }
      });
      $(document).mousemove(function(e) {
        if (timeDrag) {
          updatebar(e.pageX);
        }
      });

      //update Progress Bar control
      var updatebar = function(x) {

        var progress = $('.jp-progress');
        //var maxduration = myPlaylist.duration; //audio duration

        var position = x - progress.offset().left; //Click pos
        var percentage = 100 * position / progress.width();

        //Check within range
        if (percentage > 100) {
          percentage = 100;
        }
        if (percentage < 0) {
          percentage = 0;
        }

        $("#jquery_jplayer_1").jPlayer("playHead", percentage);

        //Update progress bar
        $('.jp-play-bar').css('width', percentage + '%');
      };

    }); // end jplayer event ready

}); // end document ready
</script>