diff --git a/.sass-cache/4a6d8be8f534f004cdf430126887d31dbb23a5e4/style.scssc b/.sass-cache/4a6d8be8f534f004cdf430126887d31dbb23a5e4/style.scssc new file mode 100644 index 0000000..008f4a1 Binary files /dev/null and b/.sass-cache/4a6d8be8f534f004cdf430126887d31dbb23a5e4/style.scssc differ diff --git a/README.md b/README.md index 2464d38..931e007 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ # assignment_royalty_free_music_player Ushering in the reign of Royalty Free Music w/ JavaScript. + +Thomas Hauge diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..c3e5c05 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/.sass-cache/9f4450bc383f283b854e80c82dd6148b72903fae/style.scssc b/assets/.sass-cache/9f4450bc383f283b854e80c82dd6148b72903fae/style.scssc new file mode 100644 index 0000000..a453bcd Binary files /dev/null and b/assets/.sass-cache/9f4450bc383f283b854e80c82dd6148b72903fae/style.scssc differ diff --git a/assets/audio/track1.mp3 b/assets/audio/track1.mp3 new file mode 100644 index 0000000..af4a36c Binary files /dev/null and b/assets/audio/track1.mp3 differ diff --git a/assets/audio/track2.mp3 b/assets/audio/track2.mp3 new file mode 100644 index 0000000..fde3846 Binary files /dev/null and b/assets/audio/track2.mp3 differ diff --git a/assets/audio/track3.mp3 b/assets/audio/track3.mp3 new file mode 100644 index 0000000..242ca0e Binary files /dev/null and b/assets/audio/track3.mp3 differ diff --git a/assets/audio/track4.mp3 b/assets/audio/track4.mp3 new file mode 100644 index 0000000..91dd23a Binary files /dev/null and b/assets/audio/track4.mp3 differ diff --git a/assets/audio/track5.mp3 b/assets/audio/track5.mp3 new file mode 100644 index 0000000..ac7109b Binary files /dev/null and b/assets/audio/track5.mp3 differ diff --git a/assets/fonts/glyphicons-halflings-regular.eot b/assets/fonts/glyphicons-halflings-regular.eot new file mode 100755 index 0000000..b93a495 Binary files /dev/null and b/assets/fonts/glyphicons-halflings-regular.eot differ diff --git a/assets/fonts/glyphicons-halflings-regular.svg b/assets/fonts/glyphicons-halflings-regular.svg new file mode 100755 index 0000000..94fb549 --- /dev/null +++ b/assets/fonts/glyphicons-halflings-regular.svg @@ -0,0 +1,288 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/fonts/glyphicons-halflings-regular.ttf b/assets/fonts/glyphicons-halflings-regular.ttf new file mode 100755 index 0000000..1413fc6 Binary files /dev/null and b/assets/fonts/glyphicons-halflings-regular.ttf differ diff --git a/assets/fonts/glyphicons-halflings-regular.woff b/assets/fonts/glyphicons-halflings-regular.woff new file mode 100755 index 0000000..9e61285 Binary files /dev/null and b/assets/fonts/glyphicons-halflings-regular.woff differ diff --git a/assets/fonts/glyphicons-halflings-regular.woff2 b/assets/fonts/glyphicons-halflings-regular.woff2 new file mode 100755 index 0000000..64539b5 Binary files /dev/null and b/assets/fonts/glyphicons-halflings-regular.woff2 differ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..003c3de --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,87 @@ +$(document).ready(function() { + + $("audio").trigger("load"); + + $(".play-pause").on("click", function() { + let $target = $(this); + let $audio = $target.parent().next("audio"); + loadTrack($target); + + if ($target.hasClass("active") && $target.hasClass("glyphicon-play")) { + $target.removeClass("glyphicon-play").addClass("glyphicon-pause"); + $(".footer-play-pause").removeClass("glyphicon-play").addClass("glyphicon-pause"); + $audio.trigger("play"); + } else if ($target.hasClass("active") && $target.hasClass("glyphicon-pause")) { + $target.removeClass("glyphicon-pause").addClass("glyphicon-play"); + $(".footer-play-pause").removeClass("glyphicon-pause").addClass("glyphicon-play"); + $audio.trigger("pause"); + } else { + toggleOtherTrack($target, $audio); + }; + }); + + $(".footer-play-pause").on("click", function() { + let $target = $(this); + let $audio = $(".active").parent().next("audio"); + + if ($target.hasClass("glyphicon-play")) { + $target.removeClass("glyphicon-play").addClass("glyphicon-pause"); + $(".active").removeClass("glyphicon-play").addClass("glyphicon-pause"); + $audio.trigger("play"); + } else { + $target.removeClass("glyphicon-pause").addClass("glyphicon-play"); + $(".active").removeClass("glyphicon-pause").addClass("glyphicon-play"); + $audio.trigger("pause"); + }; + }); + + $(".footer-previous").on("click", function() { + let $currentIndex = $(".play-pause").index($(".active")); + let $target; + let $audio; + + if ($currentIndex === 0) { + $target = $(".play-pause").last(); + $audio = $target.parent().next("audio"); + } else { + $target = ($(".play-pause").eq($currentIndex - 1)); + $audio = $target.parent().next("audio"); + }; + + toggleOtherTrack($target, $audio); + }); + + $(".footer-next").on("click", function() { + let $currentIndex = $(".play-pause").index($(".active")); + let $target; + let $audio; + + if ($currentIndex === $(".play-pause").length - 1) { + $target = $(".play-pause").first(); + $audio = $target.parent().next("audio"); + } else { + $target = ($(".play-pause").eq($currentIndex + 1)); + $audio = $target.parent().next("audio"); + }; + + toggleOtherTrack($target, $audio); + }); + + loadTrack = function($target) { + let title = $target.parent().parent().next().find(".track-title").text(); + let artist = $target.parent().parent().next().find(".artist").text(); + + $(".track-selected").text(title); + $(".artist-selected").text(artist); + }; + + toggleOtherTrack = function($target, $audio) { + $(".play-pause").removeClass("active").removeClass("glyphicon-pause").addClass("glyphicon-play"); + $("audio").trigger("pause").prop("currentTime", 0); + $target.addClass("active").removeClass("glyphicon-play").addClass("glyphicon-pause"); + loadTrack($target); + $(".footer-play-pause").removeClass("glyphicon-play").addClass("glyphicon-pause"); + $audio.trigger("play"); + }; + +}); diff --git a/assets/styles/.sass-cache/f23c2056a32672a45d4259992ad75ed2bd1a821d/style.scssc b/assets/styles/.sass-cache/f23c2056a32672a45d4259992ad75ed2bd1a821d/style.scssc new file mode 100644 index 0000000..7b03dbc Binary files /dev/null and b/assets/styles/.sass-cache/f23c2056a32672a45d4259992ad75ed2bd1a821d/style.scssc differ diff --git a/assets/styles/style.css b/assets/styles/style.css new file mode 100644 index 0000000..ca2c38c --- /dev/null +++ b/assets/styles/style.css @@ -0,0 +1,18 @@ +.col-sm-12 { + border-bottom: 1px solid #bababa; + padding-top: 7px; + padding-bottom: 7px; } + +.faded { + font-weight: 200; } + +footer { + color: white; } + footer .glyphicon { + color: white; } + footer .btn-xlg { + border: 1px solid white; + border-radius: 50%; + background-color: inherit; } + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/styles/style.css.map b/assets/styles/style.css.map new file mode 100644 index 0000000..c35a3b6 --- /dev/null +++ b/assets/styles/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,UAAW;EACT,aAAa,EAAE,iBAAiB;EAChC,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;AAGrB,MAAO;EACL,WAAW,EAAE,GAAG;;AAGlB,MAAO;EACL,KAAK,EAAE,KAAK;EACZ,iBAAW;IACT,KAAK,EAAE,KAAK;EAEd,eAAS;IACP,MAAM,EAAE,eAAe;IACvB,aAAa,EAAE,GAAG;IAClB,gBAAgB,EAAE,OAAO", +"sources": ["style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/assets/styles/style.scss b/assets/styles/style.scss new file mode 100644 index 0000000..004b511 --- /dev/null +++ b/assets/styles/style.scss @@ -0,0 +1,21 @@ +.col-sm-12 { + border-bottom: 1px solid #bababa; + padding-top: 7px; + padding-bottom: 7px; +} + +.faded { + font-weight: 200; +} + +footer { + color: white; + .glyphicon { + color: white; + } + .btn-xlg { + border: 1px solid white; + border-radius: 50%; + background-color: inherit; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf5d821 --- /dev/null +++ b/index.html @@ -0,0 +1,150 @@ + + + + + + + Royalty Free Music Player + + + + + + +
+ +
+ +
+
+ +
+
+
+
+ + +
+
+

Subzero

+ Ben Klock +
+
+
+
+ +
+
+
+
+ + +
+
+

Higher Level (Bicep Remix)

+ Isaac Tichauer +
+
+
+
+ +
+
+
+
+ + +
+
+

Sometimes (Original Mix)

+ Detroit Swindle +
+
+
+
+ +
+
+
+
+ + +
+
+

B.F.O.D.A.A.S

+ Mall Grab +
+
+
+
+ +
+
+
+
+ + +
+
+

German Winter (Original Mix)

+ andhim +
+
+
+
+ +
+
+ + + +