// HTML5 audio player + playlist controls... // Inspiration: http://jonhall.info/how_to/create_a_playlist_for_html5_audio // Mythium Archive: https://archive.org/details/mythium/ jQuery(function ($) { 'use strict' var supportsAudio = !!document.createElement('audio').canPlayType; if (supportsAudio) { var index = 0, playing = false, extension = '', mediaPath = 'audio/chillanddream/', tracks = JSON.parse('[{"name":"Retrospection","length":"5:58","track":"1","file":"Retrospection.m4a"},{"name":"Sundown In Paradise","length":"7:24","track":"2","file":"Sundown%20in%20Paradise.m4a"},{"name":"Chillout","length":"7:06","track":"3","file":"Chillout.m4a"},{"name":"Breaking Sun.m4a","length":"3:58","track":4,"file":"Breaking%20Sun.m4a"},{"name":"Afterwork Groove","length":"5:38","track":"5","file":"Afterwork%20Groove.m4a"},{"name":"Heartbeat","length":"4:24","track":"6","file":"Heartbeat.m4a"},{"name":"Color.m4a","length":"4:17","track":7,"file":"Color.m4a"},{"name":"Space","length":"5:14","track":"8","file":"Space.m4a"},{"name":"Rainy","length":"3:29","track":"9","file":"Rainy.m4a"},{"name":"Out Of The Darkness.m4a","length":"7:19","track":10,"file":"Out%20Of%20The%20Darkness.m4a"}]'), buildPlaylist = $.each(tracks, function(key, value) { var trackNumber = value.track, trackName = value.name, trackLength = value.length; if (trackNumber.toString().length === 1) { trackNumber = '0' + trackNumber; } else { trackNumber = '' + trackNumber; } $('\#plList').append('
  • ' + trackNumber + '.
    ' + trackName + '
    ' + trackLength + '
  • '); }), trackCount = tracks.length, npAction = $('\#npAction'), npTitle = $('\#npTitle'), audio = $('\#audio1').bind('play', function () { playing = true; npAction.text('Now Playing...'); }).bind('pause', function () { playing = false; npAction.text('Paused...'); }).bind('ended', function () { npAction.text('Paused...'); if ((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('\#btnPrev').click(function () { if ((index - 1) > -1) { index--; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('\#btnNext').click(function () { if ((index + 1) < trackCount) { index++; loadTrack(index); if (playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), li = $('\#plList li').click(function () { var id = parseInt($(this).index()); if (id !== index) { playTrack(id); } }), loadTrack = function (id) { $('.plSel').removeClass('plSel'); $('\#plList li:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = mediaPath + tracks[id].file + extension; }, playTrack = function (id) { loadTrack(id); audio.play(); }; extension = '';//audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : ''; loadTrack(index); } }); //initialize plyr plyr.setup($('\#audio1'), {});