// html5media enables and tags in all major browsers // External File: http://api.html5media.info/1.1.8/html5media.min.js // Add user agent as an attribute on the tag... // Inspiration: http://css-tricks.com/ie-10-specific-styles/ var b = document.documentElement; b.setAttribute('data-useragent', navigator.userAgent); b.setAttribute('data-platform', navigator.platform); // 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 ($) { var supportsAudio = !!document.createElement('audio').canPlayType; if (supportsAudio) { var index = 0, playing = false, mediaPath = '/media/', extension = '', tracks = [{ "track": 1, "name": "Hello", "length": "04:59", "file": "Hello" }, { "track": 2, "name": "Set Fire To The Rain", "length": "04:00", "file": "Setfire" }, { "track": 3, "name": "When We Were Young", "length": "04:41", "file": "When-we-were-young" }, { "track": 4, "name": "Skyfall", "length": "04:47", "file": "Skyfall" }, { "track": 5, "name": "Send My Love", "length": "03:41", "file": "Send-my-love" }, { "track": 6, "name": "I Drink Wine", "length": "05:05", "file": "i-drink-wine" }, { "track": 7, "name": "Rolling In The Deep", "length": "03:57", "file": "Rollin" }, { "track": 8, "name": "Rumour Has It", "length": "03:41", "file": "Rumour" }, { "track": 9, "name": "Easy On Me", "length": "03:44", "file": "Easy-on-me" }, { "track": 10, "name": "Someone Like You", "length": "04:43", "file": "Someone-like-you" }, { "track": 11, "name": "All I Ask", "length": "04:29", "file": "All-I-ask" }], 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); } });