diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..9547064 Binary files /dev/null and b/.DS_Store differ diff --git a/.sass-cache/1697b72c9d9d2b0ba999587fc9dcf096011855ee/master.scssc b/.sass-cache/1697b72c9d9d2b0ba999587fc9dcf096011855ee/master.scssc new file mode 100644 index 0000000..179764f Binary files /dev/null and b/.sass-cache/1697b72c9d9d2b0ba999587fc9dcf096011855ee/master.scssc differ diff --git a/README.md b/README.md index 2464d38..25859ca 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,37 @@ -# assignment_royalty_free_music_player -Ushering in the reign of Royalty Free Music w/ JavaScript. +# Royalty Free Music Player - JavaScript/jQuery + +HTML, CSS, JavaScript, jQuery + +Here is my music player based on a images provided by VCS. The music player holds a playlist of some royalty free songs. You can play any of them and jump between songs. Here are some requirements that this projects meet, originally requested by Viking Code School: +- A list of songs listed with their artists +- Each song should either be clickable or have a play button +- Each song should display differently when it’s being played +- A status bar with a play/pause button and the information for the current track +- The status bar should also have next and previous track buttons + + +![Music Player](music_player.png) + +## Getting Started + +OPEN LINK: http://cdn.rawgit.com/Visiona/assignment_royalty_free_music_player/f5bde28c/index.html + +OR + +You can clone the repository to your laptop and got into the project folder, then run: + +``` +ruby -run -e httpd . -p 9090 + +``` + +and open broswer on http://localhost:9090/ + +## Authors + +* **Dariusz Biskupski** - *Initial work* - https://dariuszbiskupski.com + + +## Acknowledgments + +This assignment I created for [Viking Code School](https://www.vikingcodeschool.com/) diff --git a/app/sass b/app/sass new file mode 100644 index 0000000..095292e --- /dev/null +++ b/app/sass @@ -0,0 +1,25 @@ +/* +Errno::ENOENT: No such file or directory @ rb_sysopen - app/sass + +Backtrace: +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:454:in `read' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:454:in `update_stylesheet' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `each' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:209:in `update_stylesheets' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin/compiler.rb:294:in `watch' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/plugin.rb:109:in `method_missing' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:360:in `watch_or_update' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/sass_scss.rb:51:in `process_result' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/base.rb:52:in `parse' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/lib/sass/exec/base.rb:19:in `parse!' +/Users/Visiona/.rvm/gems/ruby-2.2.4/gems/sass-3.5.1/bin/sass:13:in `' +/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/sass:23:in `load' +/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/sass:23:in `
' +/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/ruby_executable_hooks:15:in `eval' +/Users/Visiona/.rvm/gems/ruby-2.2.4/bin/ruby_executable_hooks:15:in `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Errno::ENOENT: No such file or directory @ rb_sysopen - app/sass"; } diff --git a/assets/crown.png b/assets/crown.png new file mode 100644 index 0000000..108fe36 Binary files /dev/null and b/assets/crown.png differ diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/composer.json @@ -0,0 +1 @@ +{} diff --git a/home.html b/home.html new file mode 100644 index 0000000..01106fd --- /dev/null +++ b/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + Royalty Music Player + + + +
+ +
+ +

Royalty Free Music Player

+
+ +
+
+ + + + + +
+
+
+
+ + + +
+ + + + + + +
+

+
+
+ + +
+ +
+ + + + + + + + + + + + + + + diff --git a/index.php b/index.php new file mode 100644 index 0000000..5cfa0d7 --- /dev/null +++ b/index.php @@ -0,0 +1 @@ + diff --git a/master.scss b/master.scss new file mode 100644 index 0000000..b776f01 --- /dev/null +++ b/master.scss @@ -0,0 +1,102 @@ +@import url('https://fonts.googleapis.com/css?family=Oswald'); + +body { + font-family: 'Oswald', sans-serif; + color: #333; +} + +div.title-wrapper { + background-color: #ccc; + padding: 3px; + border-bottom: 1px solid #333; + text-align: center; + h3 { + display: inline-block; + font-weight: 200; + margin-top: 15px; + margin-bottom: 0; + } + img { + width: 30px; + margin-bottom: 10px; + display: inline; + } + +} + +div.music-wrapper { + width: 500px; + margin: 80px auto; + border: 1px solid #333; +} + +h6 { + color: #888; + margin: 5px 2px; +} + +h5, h4 { + margin: 5px 2px; +} + + +div.playlist { + min-height: 150px; + max-height: 300px; + overflow-y: scroll; + overflow: auto; +} + +div.playlist a.song-listed { + padding: 5px; + border-bottom: 1px solid #333; + font-size: 25px; + color: #ccc; + text-decoration: none; + display: block; + div.song-title { + max-width: 200px; + display: inline-block; + margin-left: 10px; + } + span.glyphicon { + top: -5px; + } +} + +a.song-listed:hover > *{ + color: #000; +} + + +div.playing-song { + background-color: #333; + padding: 5px 2px; + + a.controls { + display: inline-block; + vertical-align: top; + margin-top: 15px; + margin-left: 20px; + text-decoration: none; + span.glyphicon { + font-size: 25px; + color: #fff; + top: -2px; + } + span.glyphicon:hover { + color: #666; + } + } + + div.song-playing-title { + font-family: Helvetica; + color: #fff; + font-weight: 100; + display: inline-block; + margin-left: 10px; + h5 { + color: #999; + } + } +} diff --git a/music.js b/music.js new file mode 100644 index 0000000..e9c22b0 --- /dev/null +++ b/music.js @@ -0,0 +1,192 @@ + +var getJson = { + url: 'https://www.dropbox.com/s/rz4b6k9d0yytjwu/songs.json?raw=1', + createCORSRequest: function (method, url) { + var xhr = new XMLHttpRequest(); + if ("withCredentials" in xhr) { + // XHR for Chrome/Firefox/Opera/Safari. + xhr.open(method, url, true); + } else if (typeof XDomainRequest != "undefined") { + // XDomainRequest for IE. + xhr = new XDomainRequest(); + xhr.open(method, url); + } else { + // CORS not supported. + xhr = null; + } + // xhr.responseType = 'json'; + return xhr; + }, +}; + +var togglePlayStatus = function(jQ, elementHide, elementShow) { + jQ.children(elementHide).hide(); + jQ.children(elementShow).show(); +} + +var toggleSiblingsPlayStatus = function(jQ, elementHide, elementShow) { + jQ.siblings(elementHide).hide(); + jQ.siblings(elementShow).show(); +} + +// var safePausing = function(audio) { +// var playPromise = audio.play(); +// if (playPromise !== undefined) { +// playPromise.then(_ => { +// // Automatic playback started! +// // Show playing UI. +// // We can now safely pause video... +// video.pause(); +// }) +// .catch(error => { +// // Auto-play was prevented +// // Show paused UI. +// }); +// } +// } + + +$(document).ready(function() { + + var xhr = getJson.createCORSRequest('GET', getJson.url); + xhr.responseType = 'json'; + xhr.send(); + xhr.onload = function() { + var vcsMusic = xhr.response; + showSong(vcsMusic); + } + + var songsLink = {}; + var audioTracks = {}; + var isPlaying; + + function showSong(jsonObj) { + var albums = jsonObj; + + for (var j = 0; j < albums.length; j++) { + var currentSongName = albums[j]['name']; + var currentSongAuthor = albums[j]['artist']; + var currentSongLink = albums[j]['track_url']; + songsLink[currentSongName] = currentSongLink; + var $songBox = $('a.test-song').clone(true, true); + + $songBox.removeClass().addClass('song-listed'); + $songBox.find('h5').text(currentSongName); + $songBox.find('h6').text(currentSongAuthor); + $songBox.appendTo('.playlist'); + } + + var $link = $('a.song-listed'); + + + $link.click( function(event) { + event.preventDefault(); + + var name = $(this).find('h5').text(); + var author = $(this).find('h6').text(); + // console.log(name); + // console.log(author); + + if (audioTracks[name]) { + audioTracks[name] = audioTracks[name]; + } else { + audioTracks[name] = new Audio(songsLink[name]); + } + + if (Object.keys(audioTracks).length > 1 && !isPlaying ) { + delete audioTracks[Object.keys(audioTracks)[0]]; + } + + // console.log(audioTracks[name]); + // console.log(Object.keys(audioTracks)); + if (Object.keys(audioTracks).length > 1 && isPlaying) { + delete audioTracks[name]; + return + } else if (isPlaying && name == Object.keys(audioTracks)) { + // safePausing(audioTracks[$name]); + audioTracks[name].pause(); + console.log('pause'); + togglePlayStatus( $(this), 'span.glyphicon-pause', 'span.glyphicon-play'); + togglePlayStatus( $('a.controls'), 'span.glyphicon-pause', 'span.glyphicon-play'); + audioTracks[name].currentTime = 0; + audioTracks = {}; + } else if (!isPlaying && name == Object.keys(audioTracks)) { + audioTracks[name].play(); + console.log('play'); + togglePlayStatus( $(this), 'span.glyphicon-play', 'span.glyphicon-pause'); + togglePlayStatus( $('a.controls'), 'span.glyphicon-play', 'span.glyphicon-pause'); + $('a.controls').find('h4').text(name); + $('a.controls').find('h5').text(author); + + } + isPlaying = !isPlaying; + return false; + + }) + $('a.test-song').hide(); + } + + + var $controlsPlay = $('a.controls span.glyphicon'); + + $controlsPlay.on('click', function(event) { + var $name = $('a.controls').find('h4').text(); + var $target = $(event.target); + var $playlistSong = $("h5:contains('" + $name + "')").parents().parents(); + + if ( $target.is('span.glyphicon-pause') ) { + // safePausing(audioTracks[$name]); + audioTracks[$name].pause(); + $(this).hide(); + $(this).siblings('span.glyphicon-play').show(); + togglePlayStatus( $playlistSong, 'span.glyphicon-pause', 'span.glyphicon-play'); + + } else if ( $target.is('span.glyphicon-play') ) { + if ($name) { + audioTracks[$name].play(); + $(this).siblings('span.glyphicon-pause').show(); + $(this).hide(); + togglePlayStatus( $playlistSong, 'span.glyphicon-play', 'span.glyphicon-pause'); + } + + } else if ( $target.is('span.glyphicon-step-backward') ) { + + if ($name && $target.siblings('span.glyphicon-play').is(":visible")) { + isPlaying = false; + audioTracks = {}; + $playlistSong.prev().trigger( "click" ); + + } else if ($name && $target.siblings('span.glyphicon-pause').is(":visible")) { + // safePausing(audioTracks[$name]); + audioTracks[$name].pause(); + toggleSiblingsPlayStatus($(this), 'span.glyphicon-pause', 'span.glyphicon-play'); + togglePlayStatus( $playlistSong, 'span.glyphicon-pause', 'span.glyphicon-play'); + isPlaying = false; + audioTracks = {}; + $playlistSong.prev().trigger( "click" ); + } + + } else if ( $target.is('span.glyphicon-step-forward') ) { + + if ($name && $target.siblings('span.glyphicon-play').is(":visible")) { + isPlaying = false; + audioTracks = {}; + $playlistSong.next().trigger( "click" ); + + } else if ($name && $target.siblings('span.glyphicon-pause').is(":visible")) { + // safePausing(audioTracks[$name]); + audioTracks[$name].pause(); + toggleSiblingsPlayStatus($(this), 'span.glyphicon-pause', 'span.glyphicon-play'); + togglePlayStatus( $playlistSong, 'span.glyphicon-pause', 'span.glyphicon-play'); + isPlaying = false; + audioTracks = {}; + $playlistSong.next().trigger( "click" ); + } + + } + isPlaying = !isPlaying; + }); + + $('span.glyphicon-pause').hide(); + +}); diff --git a/music_player.png b/music_player.png new file mode 100644 index 0000000..a4fdbbb Binary files /dev/null and b/music_player.png differ diff --git a/out_master.css b/out_master.css new file mode 100644 index 0000000..2df2b47 --- /dev/null +++ b/out_master.css @@ -0,0 +1,81 @@ +@import url("https://fonts.googleapis.com/css?family=Oswald"); +body { + font-family: 'Oswald', sans-serif; + color: #333; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +div.title-wrapper { + background-color: #ccc; + padding: 3px; + border-bottom: 1px solid #333; + text-align: center; } + div.title-wrapper h3 { + display: inline-block; + font-weight: 200; + margin-top: 15px; + margin-bottom: 0; } + div.title-wrapper img { + width: 30px; + margin-bottom: 10px; + display: inline; } + +div.music-wrapper { + width: 500px; + margin: 80px auto; + border: 1px solid #333; } + +h6 { + color: #888; + margin: 5px 2px; } + +h5, h4 { + margin: 5px 2px; } + +div.playlist { + min-height: 150px; + max-height: 300px; + overflow-y: scroll; + overflow: auto; } + +div.playlist a.song-listed { + padding: 5px; + border-bottom: 1px solid #333; + font-size: 25px; + color: #ccc; + text-decoration: none; + display: block; } + div.playlist a.song-listed div.song-title { + max-width: 200px; + display: inline-block; + margin-left: 10px; } + div.playlist a.song-listed span.glyphicon { + top: -5px; } + +a.song-listed:hover > * { + color: #000; } + +div.playing-song { + background-color: #333; + padding: 5px 2px; } + div.playing-song a.controls { + display: inline-block; + vertical-align: top; + margin-top: 15px; + margin-left: 20px; + text-decoration: none; } + div.playing-song a.controls span.glyphicon { + font-size: 25px; + color: #fff; + top: -2px; } + div.playing-song a.controls span.glyphicon:hover { + color: #666; } + div.playing-song div.song-playing-title { + font-family: Helvetica; + color: #fff; + font-weight: 100; + display: inline-block; + margin-left: 10px; } + div.playing-song div.song-playing-title h5 { + color: #999; } diff --git a/out_master.css.map b/out_master.css.map new file mode 100644 index 0000000..acd4e82 --- /dev/null +++ b/out_master.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAQ,6DAAqD;AAE7D,IAAK;EACH,WAAW,EAAE,oBAAoB;EACjC,KAAK,EAAE,IAAI;;AAGb,iBAAkB;EAChB,gBAAgB,EAAE,IAAI;EACtB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,cAAc;EAC7B,UAAU,EAAE,MAAM;EAClB,oBAAG;IACD,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,GAAG;IAChB,UAAU,EAAE,IAAI;IAChB,aAAa,EAAE,CAAC;EAElB,qBAAI;IACF,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,MAAM;;AAKnB,iBAAkB;EAChB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,SAAS;EACjB,MAAM,EAAE,cAAc;;AAGxB,EAAG;EACD,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,OAAO;;AAGjB,MAAO;EACL,MAAM,EAAE,OAAO;;AAIjB,YAAa;EACX,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,KAAK;EACjB,UAAU,EAAE,MAAM;EAClB,QAAQ,EAAE,IAAI;;AAGhB,0BAA2B;EACzB,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,cAAc;EAC7B,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,IAAI;EACX,eAAe,EAAE,IAAI;EACrB,OAAO,EAAE,KAAK;EACd,yCAAe;IACb,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,IAAI;EAEnB,yCAAe;IACb,GAAG,EAAE,IAAI;;AAIb,uBAAuB;EACnB,KAAK,EAAE,IAAI;;AAIf,gBAAiB;EACf,gBAAgB,EAAE,IAAI;EACtB,OAAO,EAAE,OAAO;EAEhB,2BAAW;IACT,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,GAAG;IACnB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE,IAAI;IACrB,0CAAe;MACb,SAAS,EAAE,IAAI;MACf,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;IAEX,gDAAqB;MACnB,KAAK,EAAE,IAAI;EAIf,uCAAuB;IACrB,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,IAAI;IACX,WAAW,EAAE,GAAG;IAChB,OAAO,EAAE,YAAY;IACrB,WAAW,EAAE,IAAI;IACjB,0CAAG;MACD,KAAK,EAAE,IAAI", +"sources": ["master.scss"], +"names": [], +"file": "out_master.css" +} \ No newline at end of file diff --git a/songs.json b/songs.json new file mode 100644 index 0000000..ff53f57 --- /dev/null +++ b/songs.json @@ -0,0 +1,71 @@ +[{ + "name": "4 Corner Bass", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/1yhckwpr35stzlg/4-Corner-Bass_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "8-Bit Action", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/ugth1ao5ipxdxxs/8-Bit-Action_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Chip Dip", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/8wjemleu4egzrc9/Chip-Dip_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Crunch Rock", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/fden3gpe6an9bal/Crunch-Rock_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Cute Popcorn", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/savmndf1qci7igp/Cute-Popcorn_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Electro Celtic Adventure", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/lrdny4i38za63q9/Electro-Celtic-Adventure_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Enhance Your Calm", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/lrdny4i38za63q9/Electro-Celtic-Adventure_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Peaceful Space", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/ork1goa4vu5vjeh/Peaceful-Space_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Pleasant Pluck Flute", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/vfzfzlwfz4busgg/Pleasant-Pluck-Flute_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}, { + "name": "Plucked Cool", + "artist": "Affordable Audio Assets", + "album": "Affordable Audio Assets", + "image_url": "https://vcs-royalty-free-music-player.surge.sh/data/images/aa.png", + "track_url": "https://www.dropbox.com/s/2poak8cqmbrep57/Plucked-Cool_preview.mp3?raw=1", + "artist_url": "https://affordableaudioassets.com/" +}] diff --git a/test.js b/test.js new file mode 100644 index 0000000..e8f7e5d --- /dev/null +++ b/test.js @@ -0,0 +1,164 @@ +$(document).ready( function() { + + var requestURL = 'http://vcs-royalty-free-music-player.surge.sh/data/tracks/index.json'; + + function createCORSRequest(method, url) { + var xhr = new XMLHttpRequest(); + if ("withCredentials" in xhr) { + // XHR for Chrome/Firefox/Opera/Safari. + xhr.open(method, url, true); + } else if (typeof XDomainRequest != "undefined") { + // XDomainRequest for IE. + xhr = new XDomainRequest(); + xhr.open(method, url); + } else { + // CORS not supported. + xhr = null; + } + return xhr; + } + + var xhr = createCORSRequest('GET', requestURL); + + + + + var songsLink = {}; + xhr.responseType = 'json'; + xhr.send(); + xhr.onload = function() { + var musicSpotify = xhr.response; + showSong(musicSpotify); + } + var audioTracks = {}; + var isPlaying; + + + function showSong(jsonObj) { + var albums = jsonObj; + + for (var j = 0; j < albums.length; j++) { + var currentSongName = albums[j]['name']; + var currentSongAuthor = albums[j]['artist']; + var currentSongLink = albums[j]['track_url']; + songsLink[currentSongName] = currentSongLink; + var $songBox = $('a.test-song').clone(true, true); + + $songBox.removeClass().addClass('song-listed'); + $songBox.find('h5').text(currentSongName); + $songBox.find('h6').text(currentSongAuthor); + $songBox.appendTo('.playlist'); + } + + var $link = $('a.song-listed'); + + $link.click( function(event) { + event.preventDefault(); + + var name = $(this).find('h5').text(); + var author = $(this).find('h6').text(); + + if (audioTracks[name]) { + audioTracks[name] = audioTracks[name]; + } else { + audioTracks[name] = new Audio(songsLink[name]); + } + console.log('length of audiotracks is ' + Object.keys(audioTracks).length); + console.log('name is ' + name); + if (isPlaying && name == Object.keys(audioTracks)) { + audioTracks[name].pause(); + console.log('pause'); + $(this).children('span.glyphicon-pause').hide(); + $(this).children('span.glyphicon-play').show(); + + $('a.controls').children('span.glyphicon-pause').hide(); + $('a.controls').children('span.glyphicon-play').show(); + + audioTracks[name].currentTime = 0; + audioTracks = {}; + console.log('in pause lenghts of audioTracks is ' + Object.keys(audioTracks).length ); + } else if (Object.keys(audioTracks).length > 1) { + delete audioTracks[name]; + } else { + audioTracks[name].play(); + console.log('play'); + $(this).children('span.glyphicon-pause').show(); + $(this).children('span.glyphicon-play').hide(); + + $('a.controls').children('span.glyphicon-pause').show(); + $('a.controls').children('span.glyphicon-play').hide(); + $('a.controls').find('h4').text(name); + $('a.controls').find('h5').text(author); + + console.log('in playlenghts of audioTracks is ' + Object.keys(audioTracks).length ); + } + isPlaying = !isPlaying; + return false; + + }) + $('a.test-song').hide(); + } + + + var $controlsPlay = $('a.controls span.glyphicon'); + + $controlsPlay.on('click', function(event) { + var $name = $('a.controls').find('h4').text(); + var $target = $(event.target); + var $playlistSong = $("h5:contains('" + $name + "')").parents().parents(); + + if ( $target.is('span.glyphicon-pause') ) { + audioTracks[$name].pause(); + $(this).hide(); + $(this).siblings('span.glyphicon-play').show(); + + $playlistSong.children('span.glyphicon-play').show(); + $playlistSong.children('span.glyphicon-pause').hide(); + } else if ( $target.is('span.glyphicon-play') ) { + if ($name) { + audioTracks[$name].play(); + $(this).siblings('span.glyphicon-pause').show(); + $(this).hide(); + + $playlistSong.children('span.glyphicon-play').hide(); + $playlistSong.children('span.glyphicon-pause').show(); + } + } else if ( $target.is('span.glyphicon-step-backward') ) { + if ($name && $target.siblings('span.glyphicon-play').is(":visible")) { + isPlaying = false; + audioTracks = {}; + $playlistSong.prev().trigger( "click" ); + } else if ($name && $target.siblings('span.glyphicon-pause').is(":visible")) { + audioTracks[$name].pause(); + $(this).siblings('span.glyphicon-pause').hide(); + $(this).siblings('span.glyphicon-play').show(); + + $playlistSong.children('span.glyphicon-play').show(); + $playlistSong.children('span.glyphicon-pause').hide(); + isPlaying = false; + audioTracks = {}; + $playlistSong.prev().trigger( "click" ); + } + } else if ( $target.is('span.glyphicon-step-forward') ) { + if ($name && $target.siblings('span.glyphicon-play').is(":visible")) { + isPlaying = false; + audioTracks = {}; + $playlistSong.next().trigger( "click" ); + } else if ($name && $target.siblings('span.glyphicon-pause').is(":visible")) { + audioTracks[$name].pause(); + $(this).siblings('span.glyphicon-pause').hide(); + $(this).siblings('span.glyphicon-play').show(); + + $playlistSong.children('span.glyphicon-play').show(); + $playlistSong.children('span.glyphicon-pause').hide(); + isPlaying = false; + audioTracks = {}; + $playlistSong.next().trigger( "click" ); + } + } + isPlaying = !isPlaying; + }); + + $('span.glyphicon-pause').hide(); + +});