var player = $('#audio')[0]; var playState = false; var percentage; var bufferedPercentage; var currentSong = 0; var volume; var muted = false; var btn_PLAY; var btn_MUTE; // could be via ajax var playList = [ [ "Sur la Wobble", "MDK", "http://cf-media.sndcdn.com/9iRQw0m7Q71n?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vOWlSUXcwbTdRNzFuIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNTA0OTg3OTI5fX19XX0_&Signature=Z-ia3Fms~MqSS~0MIt5tYtxcnfspfrWBmpB~hl5w9K4CobNvKQI15QqCOTFVN2Cfl0dF7AzWZJHEsF0VZHokVXzDh3cEZYFPaYMsZFQfoWQYxcKvO9MasNwoAdpSkeDX34Jc1cRNfdMfTfCysj7EFJjHlzy~WAEWjqi76amwR347LSb570e12C7NwkXgeT98-gmJI5uf6Lbwh~uUEuq8JZnSo5r3wE9aonNKO-uto8e1sed1bC73RPcVjdOX1ad3OcA4h3HHHQez3iWzuALWh90RJtz9tIokBuyTBRlZqeVafcf5WOybBQC4GXAvSG~UU4ki0A35Y9YUMh30ma~xww__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ" ] ]; player.volume = .5; function playSong(songId) { if(songId) { player.src = playList[songId][2]; } else { nextSong(); } player.play(); } function pauseSong() { playState = false; player.pause(); } function switchPlayState(btn) { if(player.src == "") player.src = playList[currentSong][2]; btn_PLAY = btn != undefined ? btn : btn_PLAY; if(playState) { $(btn_PLAY).addClass('paused'); $(btn_PLAY).removeClass('playing'); player.pause(); playState = 0; } else { $(btn_PLAY).addClass('playing'); $(btn_PLAY).removeClass('paused'); player.play(); playState++; } } function nextSong() { currentSong++; if(currentSong > playList.length-1) currentSong = 0; player.src = playList[currentSong][2]; playSong(); } function previousSong() { currentSong--; if(currentSong < 0) currentSong = playList.length-1; player.src = playList[currentSong][2]; playSong(); } $(player).on('timeupdate', function() { percentage = (player.currentTime / player.duration) * 100; //console.log(percentage); $('.progress-bar.music-progress').css('left', percentage+"%"); if(percentage >= 100) { $('.progress-bar.music-progress').css('left', 0); $(btn_PLAY).addClass('paused'); $(btn_PLAY).removeClass('playing'); playState = false; } updateDetails(false); }); $(player).on('progress', function() { bufferedPercentage = (player.buffered.end(0) / player.duration) * 100; bufferedPercentage = bufferedPercentage < 50 ? bufferedPercentage - percentage : bufferedPercentage; //console.log(bufferedPercentage); $('.progress-bar.music-buffered').css('left', bufferedPercentage+"%"); }); $(player).on('ended', function() { nextSong(); }); $(player).on('durationchange', function() { updateDetails(true); }); $(player).on('play', function() { $(btn_PLAY).addClass('playing'); $(btn_PLAY).removeClass('paused'); playState = true; }); function resetButtons() { $('.progress-bar.music-music').css('left', 0); $('.progress-bar.music-buffered').css('left', 0); } function switchVol(btn) { btn_MUTE = btn; if(muted) { muted = false; player.volume = volume; $('.mute-button').addClass('vol-big'); $('.mute-button').removeClass('vol-low'); } else { muted = true; volume = player.volume; $('.mute-button').addClass('vol-low'); $('.mute-button').removeClass('vol-big'); player.volume = 0; } } function convertToTime(input) { var totalSec = input; var minutes = parseInt( totalSec / 60 ) % 60; var seconds = parseInt(totalSec % 60) + 00; return((minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)); } function updateDetails(animate) { if(animate) $('.song-details>h3,.song-details>p').css("opacity", 0); $('.song-details>h3').html("#"+(currentSong+1)+" "+playList[currentSong][0]); $('.song-details>p.song-length').html(""+convertToTime(player.duration)+" "+convertToTime(player.currentTime)+""); $('.song-details>p.song-artist').html("by "+playList[currentSong][1]+""); if(animate) $('.song-details>h3,.song-details>p').animate({ opacity: 1 }, 750); } $('#music-volume').change(function() { $('#music-vol-value').show(); player.volume = $(this).val() / 1000; $('#music-vol-value').html(parseInt(player.volume*100)+"%"); }); $('#music-volume').mouseup(function() { $('#music-vol-value').html(parseInt(player.volume*100)+"%").delay(1000).fadeOut(); }); function togglePlaylist() { viewPlaylist(); } function viewPlaylist() { $.each(playList, function(i, playListItem) { $('.player-playlist').append('
  • '+playListItem[1]+''+playListItem[0]+'
  • '); }); }