vikingeducation · stevenvz · Sep 21, 2017 · Sep 21, 2017 · Sep 21, 2017 · Sep 21, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/.sass-cache/46c7af04d17a1cb5e2d7b2c88318529c0a1d61fc/styles.scssc b/.sass-cache/46c7af04d17a1cb5e2d7b2c88318529c0a1d61fc/styles.scssc
diff --git 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.
+
+Steven Zarrella
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+	<head>
+	  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+	  <title>Royalty Free Music Player</title>
+	  <script src="https://use.fontawesome.com/5ede2dc3f1.js"></script>
+	  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
+	  <link rel="stylesheet" type="text/css" href="styles.css">
+	</head>
+
+	<body>
+
+	<main>
+		<header class="header-box">
+			<i class="fa fa-hand-spock-o fa-3x" aria-hidden="true"></i>
+			<h1>Royalty Free Music Player</h1>
+
+		</header>
+		<section>
+			<ul class="song-list">
+
+			</ul>
+
+		</section>
+		<footer class="footer-box">
+			<div class="footer-buttons">
+				<button class="fa fa-step-backward fa-2x" onclick="player.prevSong()" aria-hidden="true"></button>
+				<button id="footer-play" class="fa fa-play-circle-o fa-3x the-play-button play" onclick="player.playSong()" aria-hidden="true"></button>
+				<button id="footer-pause" class="fa fa-pause-circle-o fa-3x the-pause-button pause hide" onclick="player.pauseSong()" aria-hidden="true"></button>
+				<button class="fa fa-step-forward fa-2x" onclick="player.nextSong()" aria-hidden="true"></button>
+
+			</div>
+			<div class="current-track-info">
+				<h2 class="footer-artist"></h2>
+				<h4 class="footer-title"></h4>
+				<audio id="song-url" class="">
+					<source src="" type="audio/mpeg">
+				</audio>
+
+			</div>
+
+		</footer>
+
+		<div class="music-credit">
+			<h6>Music obtained from</h6>
+			<a href="http://www.bensound.com">www.bensound.com</a>
+		</div>
+
+	</main>
+
+	<script src="/scripts.js"></script>
+	</body>
+</html>
diff --git a/music/.DS_Store b/music/.DS_Store
diff --git a/music/bensound-anewbeginning.mp3 b/music/bensound-anewbeginning.mp3
diff --git a/music/bensound-energy.mp3 b/music/bensound-energy.mp3
diff --git a/music/bensound-goinghigher.mp3 b/music/bensound-goinghigher.mp3
diff --git a/music/bensound-happyrock.mp3 b/music/bensound-happyrock.mp3
diff --git a/music/bensound-jazzyfrenchy.mp3 b/music/bensound-jazzyfrenchy.mp3
diff --git a/music/bensound-ukulele.mp3 b/music/bensound-ukulele.mp3
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,214 @@
+'use strict';
+
+//create song list
+const SongList = {
+	song1: {
+		artist: "bensound",
+		title: "A New Beginning",
+		url: "/music/bensound-anewbeginning.mp3"
+	},
+	song2: {
+		artist: "bensound",
+		title: "Energy",
+		url: "/music/bensound-energy.mp3"
+	},
+	song3: {
+		artist: "bensound",
+		title: "Going Higher",
+		url: "/music/bensound-goinghigher.mp3"
+	},
+	song4: {
+		artist: "bensound",
+		title: "Happy Rock",
+		url: "/music/bensound-happyrock.mp3"
+	},
+	song5: {
+		artist: "bensound",
+		title: "Jazzy Frenchy",
+		url: "/music/bensound-jazzyfrenchy.mp3"
+	},
+	song6: {
+		artist: "bensound",
+		title: "Ukulele",
+		url: "/music/bensound-ukulele.mp3"
+	}
+}
+
+//create player object
+let player = {
+
+	//declare player variables
+	$songList: $('.song-list'),
+
+	songRegEx: /song\d+/,
+
+	currentSong: "",
+
+	currentSongObject: {},
+
+	songPlaying: false,
+
+	//loop through all songs in songList & populate eac one into player
+	populateSongs: function(songs) {
+
+		let songNumber = 1;
+
+		for (var song in songs) {
+			let fullSongId = "song" + songNumber;
+			console.log(fullSongId);
+			this.$songList
+				.append('<li class="song song' + songNumber + '">\
+					<div class="list-play-icon play song' + songNumber + '">\
+						<button class="fa fa-play" onclick="" aria-hidden="true"></button>\
+					</div>\
+					<div class="list-pause-icon pause song' + songNumber + ' hide">\
+						<button class="fa fa-pause" onclick="" aria-hidden="true"></button>\
+					</div>\
+					<div class="song-info">\
+						<h5 class="list-artist">' + (songs[song]).artist + '</h5>\
+						<a href="' + (songs[song]).url + '" class="list-title">' + (songs[song]).title + '\
+					</div>\
+			</li>');
+
+			songNumber += 1;
+		}
+
+	}, //populateSongs
+
+	setSong: function(song) {
+		console.log(song);
+		this.currentSong = song;
+		this.currentSongDisplay();
+		this.playSong();
+	},
+
+	currentSongDisplay: function() {
+
+		//if no currentSong, populate with song1
+		if (this.currentSong === "") {
+			this.currentSong = "song1"
+		};
+		//grab player.currentSong & use it to get relevant song info to display
+		this.currentSongObject = SongList[this.currentSong];
+		let currentArtist = this.currentSongObject.artist,
+			currentTitle = this.currentSongObject.title,
+			currentUrl = this.currentSongObject.url;
+
+		//display current song in footer
+		$('.footer-artist').text(currentArtist);
+		$('.footer-title').text(currentTitle);
+		$('#song-url')
+			.children()
+			.attr('src', currentUrl);
+
+		//add class for current songs to play/pause buttons
+		$('#footer-play')
+			.removeClass() //remove all classes
+			.addClass('fa fa-play-circle-o fa-3x the-play-button play ' + this.currentSong)
+
+		$('#footer-pause')
+			.removeClass() //remove all classes
+			.addClass('fa fa-pause-circle-o fa-3x the-pause-button pause hide ' + this.currentSong)
+
+		//load the song as soon as it's selected so that pause function works correctly
+		document.getElementById("song-url").load();
+
+	}, //currentSongDisplay
+
+	toggleButtons: function() {
+		$('.play.' + this.currentSong).toggleClass('hide');
+		$('.pause.' + this.currentSong).toggleClass('hide');
+	},
+
+	playSong: function() {
+		//WORKS ON CURRENT SONG DISPLAY!
+		document.getElementById("song-url").play();
+		this.toggleButtons();
+	}, //playSong
+
+	pauseSong: function() {
+		//WORKS ON CURRENT SONG DISPLAY!
+		document.getElementById("song-url").pause();
+		this.toggleButtons();
+	}, //pauseSong
+
+	nextSong: function() {
+		//grab the current song & add 1
+		let nextNum = parseInt(this.currentSong.match(/\d+/).toString()) + 1;
+
+		//loop back to 1st song if next button is clicked while on last song
+		if (nextNum > Object.keys(SongList).length) {
+			nextNum = 1;
+		}
+
+		//toggle list play/pause buttons
+		$('.list-pause-icon.' + player.currentSong)
+			.addClass('hide');
+		$('.list-play-icon.' + player.currentSong)
+			.removeClass('hide');
+
+		let nextSong = "song" + nextNum;
+		player.currentSong = nextSong;
+
+		player.currentSongDisplay();
+		player.playSong();
+
+	}, //nextSong
+
+	prevSong: function() {
+		//grab the current song & subtract 1
+		let nextNum = parseInt(this.currentSong.match(/\d+/).toString()) - 1;
+
+		//loop to last song if next button is clicked while on last song
+		if (nextNum < 1) {
+			nextNum = Object.keys(SongList).length;
+		}
+
+		//toggle list play/pause buttons
+		$('.list-pause-icon.' + player.currentSong)
+			.addClass('hide');
+		$('.list-play-icon.' + player.currentSong)
+			.removeClass('hide');
+
+		let nextSong = "song" + nextNum;
+		player.currentSong = nextSong;
+
+		player.currentSongDisplay();
+		player.playSong();
+	}, //prevSong
+
+
+} //player
+
+
+player.populateSongs(SongList);
+player.currentSongDisplay();
+
+//list play button is clicked
+setTimeout(function() {
+	$('.fa-play').click(function(event) {
+		let $targetSong = $(event.target)
+			.parent()
+			.attr('class')
+			.match(player.songRegEx)
+			.toString();
+
+		//toggle list play/pause buttons
+		$('.list-pause-icon.' + player.currentSong)
+			.addClass('hide');
+		$('.list-play-icon.' + player.currentSong)
+			.removeClass('hide');
+
+		player.currentSong = $targetSong;
+		player.currentSongDisplay();
+		player.playSong();
+
+	});
+}, 0);
+
+//list pause button is clicked
+setTimeout(function() {
+	$('.fa-pause').click(function(event) {
+		player.pauseSong();		
+	});
+}, 0);