diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..89ed73a Binary files /dev/null and b/.DS_Store differ diff --git a/.sass-cache/46c7af04d17a1cb5e2d7b2c88318529c0a1d61fc/styles.scssc b/.sass-cache/46c7af04d17a1cb5e2d7b2c88318529c0a1d61fc/styles.scssc new file mode 100644 index 0000000..bdbed59 Binary files /dev/null and b/.sass-cache/46c7af04d17a1cb5e2d7b2c88318529c0a1d61fc/styles.scssc differ diff --git a/README.md b/README.md index 2464d38..ecd3831 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. + +Steven Zarrella \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..dff8ad6 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + Royalty Free Music Player + + + + + + + +
+
+ +

Royalty Free Music Player

+ +
+
+ + +
+ + +
+
Music obtained from
+ www.bensound.com +
+ +
+ + + + diff --git a/music/.DS_Store b/music/.DS_Store new file mode 100644 index 0000000..71347a0 Binary files /dev/null and b/music/.DS_Store differ diff --git a/music/bensound-anewbeginning.mp3 b/music/bensound-anewbeginning.mp3 new file mode 100644 index 0000000..bead776 Binary files /dev/null and b/music/bensound-anewbeginning.mp3 differ diff --git a/music/bensound-energy.mp3 b/music/bensound-energy.mp3 new file mode 100644 index 0000000..6daffb8 Binary files /dev/null and b/music/bensound-energy.mp3 differ diff --git a/music/bensound-goinghigher.mp3 b/music/bensound-goinghigher.mp3 new file mode 100644 index 0000000..72292a9 Binary files /dev/null and b/music/bensound-goinghigher.mp3 differ diff --git a/music/bensound-happyrock.mp3 b/music/bensound-happyrock.mp3 new file mode 100644 index 0000000..ae1136b Binary files /dev/null and b/music/bensound-happyrock.mp3 differ diff --git a/music/bensound-jazzyfrenchy.mp3 b/music/bensound-jazzyfrenchy.mp3 new file mode 100644 index 0000000..ccef617 Binary files /dev/null and b/music/bensound-jazzyfrenchy.mp3 differ diff --git a/music/bensound-ukulele.mp3 b/music/bensound-ukulele.mp3 new file mode 100644 index 0000000..c56b657 Binary files /dev/null and b/music/bensound-ukulele.mp3 differ diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..21d724b --- /dev/null +++ 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('
  • \ +
    \ + \ +
    \ +
    \ + \ +
    \ +
    \ +
    ' + (songs[song]).artist + '
    \ + ' + (songs[song]).title + '\ +
    \ +
    • '); + + 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); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..b7d5056 --- /dev/null +++ b/styles.css @@ -0,0 +1,148 @@ +body { + background: #f7f8f9; } + +.hide { + display: none; } + +.header-box { + margin: auto; + display: flex; + flex-flow: row nowrap; + width: 100%; + height: 70px; + max-width: 700px; + justify-content: flex-start; + align-items: center; + background: #edf3fc; + border-style: solid; + border-width: 1px; + border-color: #12438c; } + .header-box i { + padding: 10px 5px 10px 10px; + color: #fc6d00; } + .header-box h1 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #12438c; } + +section { + margin: auto; + display: flex; + flex-flow: column nowrap; + background: #fff; + width: 100%; + max-width: 700px; + justify-content: flex-start; } + section ul { + display: flex; + flex-flow: column nowrap; + list-style: none; + width: 100%; + max-width: 700px; + padding: 0; + margin: 0; } + section .song { + display: flex; + box-sizing: border-box; + height: 50px; + flex-flow: row nowrap; + align-items: center; + width: 100%; + max-width: 700px; + margin: -1px 0 -1px 0; + padding: 8px 0 8px 15px; + border-style: solid; + border-width: 1px; + border-color: #12438c; } + section .song .song-wrap { + display: flex; + flex-flow: row nowrap; + align-items: center; + flex-basis: content; } + section .song .list-pause-icon { + cursor: pointer; + width: 26px; } + section .song .list-play-icon { + cursor: pointer; + width: 26px; } + section .song button { + border: none; + background: none; + cursor: pointer; } + section .song h5 { + margin: 0; + padding: 0 0 0 15px; + font-size: 18px; + font-family: sans-serif; + color: #fc6d00; + cursor: pointer; } + section .song a { + margin: 0; + padding: 0 0 0 15px; + text-decoration: none; + font-size: 14px; + font-family: sans-serif; + color: #12438c; + cursor: pointer; } + section .playing { + background: #e5e5e5; } + +.footer-box { + margin: auto; + display: flex; + flex-flow: row nowrap; + width: 100%; + height: 70px; + max-width: 700px; + justify-content: flex-start; + align-items: center; + background: #edf3fc; + border-style: solid; + border-width: 1px; + border-color: #12438c; } + .footer-box .footer-buttons { + display: flex; + align-items: center; + padding: 0 10px 0 10px; } + .footer-box i { + padding: 10px 5px 10px 10px; + color: #fc6d00; + cursor: pointer; } + .footer-box button { + border: none; + background: #edf3fc; + padding: 10px 5px 10px 10px; + color: #fc6d00; + cursor: pointer; } + .footer-box h2 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #12438c; } + .footer-box h4 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #898989; } + +.song-url { + display: none; } + +.music-credit { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; + margin: auto; + width: 100%; + max-width: 700px; } + .music-credit h6 { + font-family: sans-serif; + font-size: 10px; } + .music-credit a { + font-size: 10px; + font-family: sans-serif; + padding-left: 3px; } + +/*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map new file mode 100644 index 0000000..844e3c4 --- /dev/null +++ b/styles.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["styles.scss"], +"names": [], +"file": "styles.css" +} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..0760800 --- /dev/null +++ b/styles.scss @@ -0,0 +1,195 @@ +body { + background: #f7f8f9; +} + +.hide { + display: none; +} + +.header-box { + margin: auto; + display: flex; + flex-flow: row nowrap; + width: 100%; + height: 70px; + max-width: 700px; + justify-content: flex-start; + align-items: center; + background: #edf3fc; + border-style: solid; + border-width: 1px; + border-color: #12438c; + + i { + padding: 10px 5px 10px 10px; + color: #fc6d00; + } + + h1 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #12438c; + } +} + +section { + margin: auto; + display: flex; + flex-flow: column nowrap; + background: #fff; + width: 100%; + max-width: 700px; + justify-content: flex-start; + + ul { + display: flex; + flex-flow: column nowrap; + list-style: none; + width: 100%; + max-width: 700px; + padding: 0; + margin: 0; + } + + .song { + display: flex; + box-sizing: border-box; + height: 50px; + flex-flow: row nowrap; + align-items: center; + width: 100%; + max-width: 700px; + margin: -1px 0 -1px 0; + padding: 8px 0 8px 15px; + border-style: solid; + border-width: 1px; + border-color: #12438c; + + .song-wrap { + display: flex; + flex-flow: row nowrap; + align-items: center; + flex-basis: content; + } + + .list-pause-icon { + cursor: pointer; + width: 26px; + } + + .list-play-icon { + cursor: pointer; + width: 26px; + } + + button { + border: none; + background: none; + cursor: pointer; + } + + h5 { + margin: 0; + padding: 0 0 0 15px; + font-size: 18px; + font-family: sans-serif; + color: #fc6d00; + cursor: pointer; + } + + a { + margin: 0; + padding: 0 0 0 15px; + text-decoration: none; + font-size: 14px; + font-family: sans-serif; + color: #12438c; + cursor: pointer; + } + } + + .playing { + background: #e5e5e5; + } + +} + +.footer-box { + margin: auto; + display: flex; + flex-flow: row nowrap; + width: 100%; + height: 70px; + max-width: 700px; + justify-content: flex-start; + align-items: center; + background: #edf3fc; + border-style: solid; + border-width: 1px; + border-color: #12438c; + + .footer-buttons { + display: flex; + align-items: center; + padding: 0 10px 0 10px; + + .the-pause-button { + + } + + } + + i { + padding: 10px 5px 10px 10px; + color: #fc6d00; + cursor: pointer; + } + + button { + border: none; + background: #edf3fc; + padding: 10px 5px 10px 10px; + color: #fc6d00; + cursor: pointer; + } + + h2 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #12438c; + } + + h4 { + font-family: sans-serif; + margin: 0; + padding: 0 0 0 10px; + color: #898989; + } +} + +.song-url { + display: none; +} + +.music-credit { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; + margin: auto; + width: 100%; + max-width: 700px; + + h6 { + font-family: sans-serif; + font-size: 10px; + } + + a { + font-size: 10px; + font-family: sans-serif; + padding-left: 3px; + } +}