+
+
+
0:00
+
0:00
+
+
-
-
+
+
+
+
+
+
diff --git a/js/file.js b/js/file.js
new file mode 100644
index 0000000..4b21801
--- /dev/null
+++ b/js/file.js
@@ -0,0 +1,371 @@
+// To display track info in music-player box
+const statusPrompt = document.getElementById("status-prompt");
+const trackInfo = document.getElementById("track-info");
+const trackDuration = document.getElementById("track-duration");
+const progressBar = document.getElementById("progress-bar");
+const box = document.getElementById("box");
+const trackProgress = document.getElementById("track-progress");
+const colorProgress = document.getElementById("color-progress");
+
+// for controlling playlist (Buttons designed to have different UI)
+const shuffleTrack = document.getElementById("shuffle");
+const prev = document.getElementById("prev");
+const playTrack = document.getElementById("play");
+const pause = document.getElementById("pause");
+const next = document.getElementById("next");
+const repeat = document.getElementById("repeat");
+const volumeButton = document.getElementById("volume-popup");
+const progressButton = document.getElementById("progress-button");
+const forSeeking = document.getElementById("for-seeking");
+const volumeControl = document.getElementById("volume-control");
+const volumeText = document.getElementById("vc");
+const volumeProgress = document.getElementById("volume-progress");
+const listToggler = document.getElementById("list-toggler");
+
+// for background manipulation
+let topLayer = document.getElementById("topmost-layer");
+let list = document.getElementById("track-listing");
+
+// setting event listener to each track in the tracklist UI
+let track1 = document.getElementById("track1");
+let track2 = document.getElementById("track2");
+let track3 = document.getElementById("track3");
+let track4 = document.getElementById("track4");
+let track5 = document.getElementById("track5");
+let track6 = document.getElementById("track6");
+let track7 = document.getElementById("track7");
+let track8 = document.getElementById("track8");
+let track9 = document.getElementById("track9");
+let track10 = document.getElementById("track10");
+
+let Player = function(playlist){
+ this.playlist = playlist;
+ this.index = 0;
+}
+Player.prototype = {
+ // Plays songs in the playlist.
+ play: function (index) {
+ let self = this;
+ let song;
+
+ index = typeof index === "number" ? index : self.index;
+ let track = self.playlist[index];
+
+ //if track's already loaded, use current track.
+ // else, setup and load new howl
+ if (track.howl){
+ song = track.howl;
+ }else {
+ song = track.howl = new Howl({
+ src: [track.url],
+ html5: true,
+ onplay: function () {
+ trackInfo.innerHTML = playlist.tracks[index].title + " - " + playlist.tracks[index].artist.name;
+ trackDuration.innerHTML = self.formatTime(Math.round(song.duration()));
+ box.style.backgroundImage = "url(" + playlist.tracks[index].album.thumbnail + ")";
+ statusPrompt.innerHTML = "";
+ requestAnimationFrame(self.step.bind(self));
+ },
+ onload: function(){
+ statusPrompt.innerHTML = "Loading..."
+ },
+ onend: function(){
+ setTimeout(function () {
+ self.skip("next");
+ }, 2000);
+ },
+ onpause: function(){
+ statusPrompt.innerHTML = "Paused. Press play to continue.";
+ trackInfo.innerHTML = "";
+ }
+ });
+ }
+ // music starts
+ song.play();
+ // keeoing track of the current song's index
+ self.index = index;
+ },
+
+ // Pauses the current playing track
+ pause: function(){
+ let self = this;
+ // get the howl/song to be manipulated
+ let song = self.playlist[self.index].howl;
+ // pauses the song
+ song.pause();
+ },
+ // skip functionality, for next or previous button.
+ skip: function(direction){
+ let self = this;
+ let index = 0;
+ // skips song according to button clicked (prev or next)
+ if (direction === "prev") {
+ index = self.index - 1;
+ if (index < 0) {
+ index = self.playlist.length - 1;
+ }
+ }else {
+ index = self.index + 1;
+ if (index >= self.playlist.length) {
+ index = 0;
+ }
+ }
+ self.skipTo(index);
+ },
+ // shuffles the playlist
+ shuffle: function() {
+ let self = this;
+ let index = Math.floor(Math.random() * self.playlist.length);
+ let presentTrack = self.playlist[self.index].howl;
+ if (presentTrack.playing()) {
+ presentTrack.stop();
+ }
+ self.play(index);
+ },
+ // skips to a specific track based on the index
+ skipTo: function(index){
+ let self = this;
+
+ if (self.playlist[self.index].howl) {
+ self.playlist[self.index].howl.stop();
+ }
+ // plays the tracked being skipped to
+ self.play(index);
+ },
+ // repeats the current song
+ repeat: function() {
+ let self = this;
+ let currentSong = self.playlist[self.index].howl;
+ let seek = Math.round(currentSong.seek());
+ let songDuration = currentSong.duration();
+ let presentTime = Math.round(currentSong.seek());
+ time = Math.floor((songDuration * 1000) - (presentTime * 1000));
+ statusPrompt.innerHTML = "On Repeat";
+ if (currentSong.playing()) {
+ setTimeout(function () {
+ currentSong.stop();
+ currentSong.play();
+ }, time - 3000);
+ }
+ },
+ // controls the volume of the music-player
+ volume: function(realX){
+ let self = this;
+ currentSong = self.playlist[self.index].howl;
+ Howler.volume(realX);
+ },
+ // styles the appearance of the volume control and actual volume of the player
+ volumeButton: function(){
+ volumeControl.style.opacity = 1;
+ volumeText.style.opacity = 1;
+ volumeProgress.style.opacity = 1;
+
+ setTimeout(function () {
+ volumeControl.style.opacity = 0;
+ volumeText.style.opacity = 0;
+ volumeProgress.style.opacity = 0;
+ }, 5000);
+ },
+ // for seeking a particular time in current rack if desired, also while it's playing.
+ seek: function(per){
+ let self = this;
+ let currentSong = self.playlist[self.index].howl;
+ // converts the percentage into a seek position
+ if (currentSong.playing()) {
+ currentSong.seek(currentSong.duration() * per);
+ }
+ },
+ // for updating track progress
+ step: function(){
+ let self = this;
+ // get the current track being played
+ let currentSong = self.playlist[self.index].howl;
+ // determine the current position (in seconds) of the track.
+ let seek = currentSong.seek() || 0;
+ trackProgress.innerHTML = self.formatTime(Math.round(seek));
+ colorProgress.style.width = (((seek / currentSong.duration()) * 100) || 0) + '%';
+ progressButton.style.width = (((seek / currentSong.duration()) * 100) || 0) + '%';
+ //if current track is still playing, keep updating track-progress
+ if (currentSong.playing()) {
+ requestAnimationFrame(self.step.bind(self));
+ }
+ },
+ formatTime: function(secs){
+ let minutes = Math.floor(secs/60) || 0;
+ let seconds = (secs - minutes * 60) || 0;
+
+ return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+ },
+ togglePlaylist: function(){
+ var self = this;
+ list.style.display = "none";
+ if (list.style.display === "none") {
+ topLayer.style.display = "none";
+ list.style.display = "inline";
+ list.style.transform = "translate(0px, 0px) rotate(0deg)";
+ list.style.transition = "2s ease-out";
+ }else {
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+ }
+ }
+};
+
+// filtering songs without url and updating their current url with the right one
+let songSource = playlist.tracks.filter(function(song) {
+ if (song["is_external"] === false) {
+ song.url = "http://southpawgroup.com/gidimusicplayer/gidimusic/newplayer/songs/Various/" + song.url;
+ }
+ return song.url;
+});
+//setting instances of new player.
+let player = new Player(songSource);
+//let player = new Player(playlist.tracks);
+
+// setting events to buttons for control;
+
+playTrack.addEventListener("click", function() {
+ player.play();
+});
+pause.addEventListener("click", function() {
+ player.pause();
+});
+next.addEventListener("click", function() {
+ player.skip('next');
+});
+prev.addEventListener("click", function() {
+ player.skip('prev');
+});
+shuffleTrack.addEventListener("click", function(){
+ player.shuffle();
+});
+volumeButton.addEventListener("click", function(){
+ player.volumeButton();
+});
+repeat.addEventListener("click", function() {
+ player.repeat();
+});
+listToggler.addEventListener("click", function() {
+ player.togglePlaylist();
+});
+forSeeking.addEventListener("click", function getCoords(event) {
+ let x = event.clientX;
+ let windowBreadth = window.innerWidth;
+ let box;
+ let trackwidth;
+ let boxStart;
+ let realX;
+ if (windowBreadth >= 430) {
+ box = (40/100) * windowBreadth;
+ boxStart = (30/100) * windowBreadth;
+ trackwidth = x - (boxStart + 1);
+ realX = ((x - (boxStart + 1)) / box);
+ }else if (windowBreadth >= 380 && windowBreadth <= 429) {
+ box = (60/100) * windowBreadth;
+ boxStart = (20/100) * windowBreadth;
+ trackwidth = x - (boxStart + 1);
+ realX = ((x - (boxStart + 1)) / box);
+ }else {
+ box = (90/100) * windowBreadth;
+ boxStart = (5/100) * windowBreadth;
+ trackwidth = x - (boxStart + 1);
+ realX = ((x - (boxStart + 1)) / box);
+ }
+ console.log(trackwidth);
+ console.log(realX);
+ player.seek(realX)
+});
+volumeControl.addEventListener("click", function(){
+ let x = event.clientX;
+ let windowBreadth = window.innerWidth;
+ let box;
+ let boxStart;
+ let volumeWidth;
+ let progressWidth;
+ let realX;
+ if (windowBreadth >= 430) {
+ box = (40/100) * windowBreadth;
+ boxStart = (30/100) * windowBreadth;
+ volumeWidth = (x -(boxStart + 1));
+ progressWidth = Math.round(volumeWidth/box * 100);
+ realX = (progressWidth / 100) * 1;
+ }else if (windowBreadth >= 380 && windowBreadth <= 429) {
+ box = (60/100) * windowBreadth;
+ boxStart = (20/100) * windowBreadth;
+ volumeWidth = (x - (boxStart + 1));
+ progressWidth = Math.round(volumeWidth/box * 100);
+ realX = (progressWidth / 100) * 1;
+ }else {
+ box = (90/100) * windowBreadth;
+ boxStart = (5/100) * windowBreadth;
+ volumeWidth = (x - (boxStart + 1));
+ progressWidth = Math.round(volumeWidth/box * 100);
+ realX = (progressWidth / 100) * 1;
+ }
+ console.log(volumeWidth);
+ console.log(progressWidth);
+ console.log(realX);
+ volumeProgress.style.width = progressWidth + "%";
+ player.volume(realX);
+});
+
+// Playing the corresponding tracks from the tracklist UI
+track1.addEventListener("click", function() {
+ player.skipTo(0);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track2.addEventListener("click", function() {
+ player.skipTo(1);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track3.addEventListener("click", function() {
+ player.skipTo(2);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track4.addEventListener("click", function() {
+ player.skipTo(3);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track5.addEventListener("click", function() {
+ player.skipTo(4);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track6.addEventListener("click", function() {
+ player.skipTo(5);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track7.addEventListener("click", function() {
+ player.skipTo(6);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track8.addEventListener("click", function() {
+ player.skipTo(7);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track9.addEventListener("click", function() {
+ player.skipTo(8);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+track10.addEventListener("click", function() {
+ player.skipTo(9);
+ list.style.display = "none";
+ topLayer.style.display = "inline";
+});
+// cache the playlist in the DOM to avoid lengthy wait
+window.onload = function() {
+ for (let i = 0; i < playlist.tracks.length; i++) {
+ let tracks = [playlist.tracks[i].url];
+ var music = document.createElement("Audio");
+ let tracklist = tracks;
+ music.src = tracklist;
+ }
+}
diff --git a/js/howler.core.min.js b/js/howler.core.min.js
new file mode 100644
index 0000000..75cc0a9
--- /dev/null
+++ b/js/howler.core.min.js
@@ -0,0 +1,2 @@
+/*! howler.js v2.0.3 | (c) 2013-2017, James Simpson of GoldFire Studios | MIT License | howlerjs.com */
+!function(){"use strict";var e=function(){this.init()};e.prototype={init:function(){var e=this||n;return e._counter=0,e._codecs={},e._howls=[],e._muted=!1,e._volume=1,e._canPlayEvent="canplaythrough",e._navigator="undefined"!=typeof window&&window.navigator?window.navigator:null,e.masterGain=null,e.noAudio=!1,e.usingWebAudio=!0,e.autoSuspend=!0,e.ctx=null,e.mobileAutoEnable=!0,e._setup(),e},volume:function(e){var o=this||n;if(e=parseFloat(e),o.ctx||_(),void 0!==e&&e>=0&&e<=1){if(o._volume=e,o._muted)return o;o.usingWebAudio&&(o.masterGain.gain.value=e);for(var t=0;t
=0;o--)e._howls[o].unload();return e.usingWebAudio&&e.ctx&&void 0!==e.ctx.close&&(e.ctx.close(),e.ctx=null,_()),e},codecs:function(e){return(this||n)._codecs[e.replace(/^x-/,"")]},_setup:function(){var e=this||n;if(e.state=e.ctx?e.ctx.state||"running":"running",e._autoSuspend(),!e.usingWebAudio)if("undefined"!=typeof Audio)try{var o=new Audio;void 0===o.oncanplaythrough&&(e._canPlayEvent="canplay")}catch(n){e.noAudio=!0}else e.noAudio=!0;try{var o=new Audio;o.muted&&(e.noAudio=!0)}catch(e){}return e.noAudio||e._setupCodecs(),e},_setupCodecs:function(){var e=this||n,o=null;try{o="undefined"!=typeof Audio?new Audio:null}catch(n){return e}if(!o||"function"!=typeof o.canPlayType)return e;var t=o.canPlayType("audio/mpeg;").replace(/^no$/,""),r=e._navigator&&e._navigator.userAgent.match(/OPR\/([0-6].)/g),a=r&&parseInt(r[0].split("/")[1],10)<33;return e._codecs={mp3:!(a||!t&&!o.canPlayType("audio/mp3;").replace(/^no$/,"")),mpeg:!!t,opus:!!o.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/,""),ogg:!!o.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),oga:!!o.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),wav:!!o.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),aac:!!o.canPlayType("audio/aac;").replace(/^no$/,""),caf:!!o.canPlayType("audio/x-caf;").replace(/^no$/,""),m4a:!!(o.canPlayType("audio/x-m4a;")||o.canPlayType("audio/m4a;")||o.canPlayType("audio/aac;")).replace(/^no$/,""),mp4:!!(o.canPlayType("audio/x-mp4;")||o.canPlayType("audio/mp4;")||o.canPlayType("audio/aac;")).replace(/^no$/,""),weba:!!o.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,""),webm:!!o.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,""),dolby:!!o.canPlayType('audio/mp4; codecs="ec-3"').replace(/^no$/,""),flac:!!(o.canPlayType("audio/x-flac;")||o.canPlayType("audio/flac;")).replace(/^no$/,"")},e},_enableMobileAudio:function(){var e=this||n,o=/iPhone|iPad|iPod|Android|BlackBerry|BB10|Silk|Mobi/i.test(e._navigator&&e._navigator.userAgent),t=!!("ontouchend"in window||e._navigator&&e._navigator.maxTouchPoints>0||e._navigator&&e._navigator.msMaxTouchPoints>0);if(!e._mobileEnabled&&e.ctx&&(o||t)){e._mobileEnabled=!1,e._mobileUnloaded||44100===e.ctx.sampleRate||(e._mobileUnloaded=!0,e.unload()),e._scratchBuffer=e.ctx.createBuffer(1,1,22050);var r=function(){var n=e.ctx.createBufferSource();n.buffer=e._scratchBuffer,n.connect(e.ctx.destination),void 0===n.start?n.noteOn(0):n.start(0),n.onended=function(){n.disconnect(0),e._mobileEnabled=!0,e.mobileAutoEnable=!1,document.removeEventListener("touchend",r,!0)}};return document.addEventListener("touchend",r,!0),e}},_autoSuspend:function(){var e=this;if(e.autoSuspend&&e.ctx&&void 0!==e.ctx.suspend&&n.usingWebAudio){for(var o=0;o0?i._seek:t._sprite[e][0]/1e3),_=Math.max(0,(t._sprite[e][0]+t._sprite[e][1])/1e3-d),s=1e3*_/Math.abs(i._rate);i._paused=!1,i._ended=!1,i._sprite=e,i._seek=d,i._start=t._sprite[e][0]/1e3,i._stop=(t._sprite[e][0]+t._sprite[e][1])/1e3,i._loop=!(!i._loop&&!t._sprite[e][2]);var l=i._node;if(t._webAudio){var c=function(){t._refreshBuffer(i);var e=i._muted||t._muted?0:i._volume;l.gain.setValueAtTime(e,n.ctx.currentTime),i._playStart=n.ctx.currentTime,void 0===l.bufferSource.start?i._loop?l.bufferSource.noteGrainOn(0,d,86400):l.bufferSource.noteGrainOn(0,d,_):i._loop?l.bufferSource.start(0,d,86400):l.bufferSource.start(0,d,_),s!==1/0&&(t._endTimers[i._id]=setTimeout(t._ended.bind(t,i),s)),o||setTimeout(function(){t._emit("play",i._id)},0)},f="running"===n.state;if("loaded"===t._state&&f)c();else{var p=f||"loaded"!==t._state?"load":"resume";t.once(p,c,f?i._id:null),t._clearTimer(i._id)}}else{var v=function(){l.currentTime=d,l.muted=i._muted||t._muted||n._muted||l.muted,l.volume=i._volume*n.volume(),l.playbackRate=i._rate,l.play(),s!==1/0&&(t._endTimers[i._id]=setTimeout(t._ended.bind(t,i),s)),o||t._emit("play",i._id)},m="loaded"===t._state&&(window&&window.ejecta||!l.readyState&&n._navigator.isCocoonJS);if(4===l.readyState||m)v();else{var h=function(){v(),l.removeEventListener(n._canPlayEvent,h,!1)};l.addEventListener(n._canPlayEvent,h,!1),t._clearTimer(i._id)}}return i._id},pause:function(e){var n=this;if("loaded"!==n._state)return n._queue.push({event:"pause",action:function(){n.pause(e)}}),n;for(var o=n._getSoundIds(e),t=0;t=0?o=parseInt(r[0],10):e=parseFloat(r[0])}else r.length>=2&&(e=parseFloat(r[0]),o=parseInt(r[1],10));var a;if(!(void 0!==e&&e>=0&&e<=1))return a=o?t._soundById(o):t._sounds[0],a?a._volume:0;if("loaded"!==t._state)return t._queue.push({event:"volume",action:function(){t.volume.apply(t,r)}}),t;void 0===o&&(t._volume=e),o=t._getSoundIds(o);for(var u=0;uo?"out":"in",d=u/.01,_=d>0?t/d:t;if(_<4&&(d=Math.ceil(d/(4/_)),_=4),"loaded"!==a._state)return a._queue.push({event:"fade",action:function(){a.fade(e,o,t,r)}}),a;a.volume(e,r);for(var s=a._getSoundIds(r),l=0;l0&&(v+="in"===i?.01:-.01),v=Math.max(0,v),v=Math.min(1,v),v=Math.round(100*v)/100,a._webAudio?(void 0===r&&(a._volume=v),t._volume=v):a.volume(v,n,!0),(oe&&v>=o)&&(clearInterval(t._interval),t._interval=null,a.volume(o,n),a._emit("fade",n))}.bind(a,s[l],c),_)}}return a},_stopFade:function(e){var o=this,t=o._soundById(e);return t&&t._interval&&(o._webAudio&&t._node.gain.cancelScheduledValues(n.ctx.currentTime),clearInterval(t._interval),t._interval=null,o._emit("fade",e)),o},loop:function(){var e,n,o,t=this,r=arguments;if(0===r.length)return t._loop;if(1===r.length){if("boolean"!=typeof r[0])return!!(o=t._soundById(parseInt(r[0],10)))&&o._loop;e=r[0],t._loop=e}else 2===r.length&&(e=r[0],n=parseInt(r[1],10));for(var a=t._getSoundIds(n),u=0;u=0?o=parseInt(r[0],10):e=parseFloat(r[0])}else 2===r.length&&(e=parseFloat(r[0]),o=parseInt(r[1],10));var i;if("number"!=typeof e)return i=t._soundById(o),i?i._rate:t._rate;if("loaded"!==t._state)return t._queue.push({event:"rate",action:function(){t.rate.apply(t,r)}}),t;void 0===o&&(t._rate=e),o=t._getSoundIds(o);for(var d=0;d=0?o=parseInt(r[0],10):(o=t._sounds[0]._id,e=parseFloat(r[0]))}else 2===r.length&&(e=parseFloat(r[0]),o=parseInt(r[1],10));if(void 0===o)return t;if("loaded"!==t._state)return t._queue.push({event:"seek",action:function(){t.seek.apply(t,r)}}),t;var i=t._soundById(o);if(i){if(!("number"==typeof e&&e>=0)){if(t._webAudio){var d=t.playing(o)?n.ctx.currentTime-i._playStart:0,_=i._rateSeek?i._rateSeek-i._seek:0;return i._seek+(_+d*Math.abs(i._rate))}return i._node.currentTime}var s=t.playing(o);s&&t.pause(o,!0),i._seek=e,i._ended=!1,t._clearTimer(o),s&&t.play(o,!0),!t._webAudio&&i._node&&(i._node.currentTime=e),t._emit("seek",o)}return t},playing:function(e){var n=this;if("number"==typeof e){var o=n._soundById(e);return!!o&&!o._paused}for(var t=0;t=0&&n._howls.splice(a,1)}var u=!0;for(t=0;t=0;a--)r[a].id&&r[a].id!==n&&"load"!==e||(setTimeout(function(e){e.call(this,n,o)}.bind(t,r[a].fn),0),r[a].once&&t.off(e,r[a].fn,r[a].id));return t},_loadQueue:function(){var e=this;if(e._queue.length>0){var n=e._queue[0];e.once(n.event,function(){e._queue.shift(),e._loadQueue()}),n.action()}return e},_ended:function(e){var o=this,t=e._sprite,r=!(!e._loop&&!o._sprite[t][2]);if(o._emit("end",e._id),!o._webAudio&&r&&o.stop(e._id,!0).play(e._id),o._webAudio&&r){o._emit("play",e._id),e._seek=e._start||0,e._rateSeek=0,e._playStart=n.ctx.currentTime;var a=1e3*(e._stop-e._start)/Math.abs(e._rate);o._endTimers[e._id]=setTimeout(o._ended.bind(o,e),a)}return o._webAudio&&!r&&(e._paused=!0,e._ended=!0,e._seek=e._start||0,e._rateSeek=0,o._clearTimer(e._id),o._cleanBuffer(e._node),n._autoSuspend()),o._webAudio||r||o.stop(e._id),o},_clearTimer:function(e){var n=this;return n._endTimers[e]&&(clearTimeout(n._endTimers[e]),delete n._endTimers[e]),n},_soundById:function(e){for(var n=this,o=0;o=0;t--){if(o<=n)return;e._sounds[t]._ended&&(e._webAudio&&e._sounds[t]._node&&e._sounds[t]._node.disconnect(0),e._sounds.splice(t,1),o--)}}},_getSoundIds:function(e){var n=this;if(void 0===e){for(var o=[],t=0;t0&&(r[o._src]=e,d(o,e))},function(){o._emit("loaderror",null,"Decoding audio data failed.")})},d=function(e,n){n&&!e._duration&&(e._duration=n.duration),0===Object.keys(e._sprite).length&&(e._sprite={__default:[0,1e3*e._duration]}),"loaded"!==e._state&&(e._state="loaded",e._emit("load"),e._loadQueue())},_=function(){try{"undefined"!=typeof AudioContext?n.ctx=new AudioContext:"undefined"!=typeof webkitAudioContext?n.ctx=new webkitAudioContext:n.usingWebAudio=!1}catch(e){n.usingWebAudio=!1}var e=/iP(hone|od|ad)/.test(n._navigator&&n._navigator.platform),o=n._navigator&&n._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),t=o?parseInt(o[1],10):null;if(e&&t&&t<9){var r=/safari/.test(n._navigator&&n._navigator.userAgent.toLowerCase());(n._navigator&&n._navigator.standalone&&!r||n._navigator&&!n._navigator.standalone&&!r)&&(n.usingWebAudio=!1)}n.usingWebAudio&&(n.masterGain=void 0===n.ctx.createGain?n.ctx.createGainNode():n.ctx.createGain(),n.masterGain.gain.value=1,n.masterGain.connect(n.ctx.destination)),n._setup()};"function"==typeof define&&define.amd&&define([],function(){return{Howler:n,Howl:o}}),"undefined"!=typeof exports&&(exports.Howler=n,exports.Howl=o),"undefined"!=typeof window?(window.HowlerGlobal=e,window.Howler=n,window.Howl=o,window.Sound=t):"undefined"!=typeof global&&(global.HowlerGlobal=e,global.Howler=n,global.Howl=o,global.Sound=t)}();
\ No newline at end of file
diff --git a/js/playlist.js b/js/playlist.js
new file mode 100644
index 0000000..b4790f9
--- /dev/null
+++ b/js/playlist.js
@@ -0,0 +1,193 @@
+const playlist = {
+ "created_at": "2017-02-23T12:39:41.371Z",
+ "owner": {
+ "name": "Admin"
+ },
+ "slug": "top-10",
+ "title": "- Top 10 ",
+ "tracks": [
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/shortskirt.mp3",
+ "plays": 978,
+ "artist": {
+ "slug": "",
+ "name": "Mr Eazi"
+ },
+ "id": 3578,
+ "is_external": true,
+ "slug": "qiLoNJ",
+ "title": "Short Skirt ft Tekno",
+ "album": {
+ "slug": "accratolagos",
+ "title": "Accra to Lagos",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/accratolagos.jpg"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/accratolagos.jpg"
+ },
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/lifeiseazyolamidephyno.mp3",
+ "plays": 1057,
+ "artist": {
+ "slug": "",
+ "name": "Mr Eazi"
+ },
+ "id": 3577,
+ "is_external": true,
+ "slug": "Uxckgk",
+ "title": "Life Is Eazi ft Olamide, Phyno",
+ "album": {
+ "slug": "accratolagos",
+ "title": "Accra to Lagos",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/accratolagos.jpg"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/accratolagos.jpg"
+ },
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/skukiagbara.mp3",
+ "plays": 979,
+ "artist": {
+ "slug": "skuki",
+ "name": "Skuki"
+ },
+ "id": 3575,
+ "is_external": true,
+ "slug": "Gmzw8W",
+ "title": "Pass the Agbara",
+ "album": {
+ "slug": "pass-agbara",
+ "title": "Pass the Agbara",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Screenshot_513.png"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Screenshot_513.png"
+ },
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/davidoif.mp3",
+ "plays": 1281,
+ "artist": {
+ "slug": "davido",
+ "name": "Davido"
+ },
+ "id": 3573,
+ "is_external": true,
+ "slug": "eeKeJU",
+ "title": "If prod by Tekno",
+ "album": {
+ "slug": "davido-if",
+ "title": "Davido If",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/IF.jpg"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/IF.jpg"
+ },
+ {
+ "url": "Mad Over You.mp3",
+ "plays": 2185,
+ "artist": {
+ "slug": "",
+ "name": "Runtown"
+ },
+ "id": 3531,
+ "is_external": false,
+ "slug": "uoyzBC",
+ "title": "Mad Over You",
+ "album": {
+ "slug": "",
+ "title": "Mad Over You",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/runtown.jpg"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/runtown.jpg"
+ },
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/iskaba.mp3",
+ "plays": 1716,
+ "artist": {
+ "slug": "wande-coal",
+ "name": "Wande Coal"
+ },
+ "id": 3538,
+ "is_external": true,
+ "slug": "3Y61Cr",
+ "title": "Iskaba ft Dj Tunez",
+ "album": {
+ "slug": "",
+ "title": "Wande Coal - Iskaba",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Wande-Coal.png"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Wande-Coal.png"
+ },
+ {
+ "url": "Daddy Yo .mp3",
+ "plays": 981,
+ "artist": {
+ "slug": "",
+ "name": "Wizkid "
+ },
+ "id": 3560,
+ "is_external": false,
+ "slug": "QuAsb2",
+ "title": "Daddy Yo ",
+ "album": {
+ "slug": "",
+ "title": "Daddy Yo",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Daddyyo.png"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/Daddyyo.png"
+ },
+ {
+ "url": "http://southpawgroup.com/gidiradio/songs/rabachabsy.mp3",
+ "plays": 1069,
+ "artist": {
+ "slug": "dj-shabsy",
+ "name": "DJ Shabsy"
+ },
+ "id": 3537,
+ "is_external": true,
+ "slug": "68G5Rp",
+ "title": "Raba ft Kiss Daniel, Sugarboy",
+ "album": {
+ "slug": "shabsy-raba",
+ "title": "Shabsy - Raba",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/DJ-Shabsy-Raba-ft.-Kiss-Daniel-Sugarboy-ART.jpg"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/DJ-Shabsy-Raba-ft.-Kiss-Daniel-Sugarboy-ART.jpg"
+ },
+ {
+ "url": "http://www.tayotv.net/wp-content/uploads/2016/10/Tekno-Diana.mp3",
+ "plays": 2823,
+ "artist": {
+ "slug": "tekno",
+ "name": "Tekno"
+ },
+ "id": 3512,
+ "is_external": true,
+ "slug": "zrqtKc",
+ "title": "Diana",
+ "album": {
+ "slug": "tekno-diana",
+ "title": "Tekno Diana",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/dianatekno.png"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/dianatekno.png"
+ },
+ {
+ "url": "Pepper Dem ft Davolee.mp3",
+ "plays": 916,
+ "artist": {
+ "slug": "olamide",
+ "name": "Olamide"
+ },
+ "id": 3565,
+ "is_external": false,
+ "slug": "iWgYPA",
+ "title": "Pepper Dem ft Davolee",
+ "album": {
+ "slug": "",
+ "title": "Single",
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/olamide.png"
+ },
+ "thumbnail": "http://southpawgroup.com/gidiloungeart/images/albums_thumbnail/olamide.png"
+ }
+ ],
+ "tracks_order": "3578,3577,3575,3573,3531,3538,3560,3537,3512,3565",
+ "number_of_plays": 44,
+ "id": 18
+}
diff --git a/paris.jpg b/paris.jpg
new file mode 100644
index 0000000..adeaf70
Binary files /dev/null and b/paris.jpg differ
diff --git a/styles.css b/styles.css
deleted file mode 100644
index 6b697bc..0000000
--- a/styles.css
+++ /dev/null
@@ -1,111 +0,0 @@
-
- body {
- font-family: 'Roboto', sans-serif;
-}
-
-.container {
- height: 100vh;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
-}
-
-#card {
- position: relative;
- overflow: hidden;
- font-family: sans-serif;
- /* background-blend-mode: luminosity; */
- /* box-shadow: 0px 8px 20px rgba(black, 0); */
- box-shadow: 0px 0px 0px black;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- width: 650px;
- height: 315px;
-}
-#card .meta {
- /* margin-top: 215px; */
- /* margin-left: 40px; */
- position: absolute;
- bottom: 20px;
- left: 45px;
- -webkit-transform: translateY(60%);
- transform: translateY(60%);
- opacity: 0;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
-}
-#card .artist {
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 5px;
- margin-bottom: 0;
-}
-#card .song {
- font-weight: 300;
- margin-top: 0;
- letter-spacing: 1px;
-}
-#card:hover {
- /* box-shadow: 0px 8px 20px rgba(black, 0.3); */
-}
-#card:hover .meta {
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- opacity: 1;
-}
-#card:hover .button {
- -webkit-transform: translateY(0%);
- transform: translateY(0%);
- opacity: 1;
-}
-
-.drake {
- color: white;
- background: #513D93 url("https://dl.dropbox.com/s/bhyk47vntgqbw9q/drake.png") no-repeat center;
- background-size: cover;
-}
-
-.button {
- position: absolute;
- right: 40px;
- bottom: 45px;
- padding: 15px 30px;
- font-size: 0.9em;
- font-weight: 700;
- color: white;
- text-transform: uppercase;
- letter-spacing: 1px;
- text-decoration: none;
- background: -webkit-linear-gradient(45deg, #00CDEA, #50E5A0);
- background: linear-gradient(45deg, #00CDEA, #50E5A0);
- border-radius: 50px;
- box-shadow: 0px 2px 5px transparent;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
- -webkit-transform: translateY(80%);
- transform: translateY(80%);
- opacity: 0;
-}
-.button:hover {
- box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-}
-
-#music-player {
- width: 650px;
- height: 0px;
- background: #00CDEA;
- -webkit-transition: all 0.3s ease-in-out;
- transition: all 0.3s ease-in-out;
-}
-
-