jameskokoska / DontForgetTheLyric

🎤 A web based application recreating the Don't Forget The Lyric game

Don't Forget The Lyrics

Goal

• To create a simple Don't Forget The Lyric Game using HTML and CSS
• Make the game easy to configure and change easily to a users preference

Usage

• The index.html file will start the application (open with a web browser)
• Navigate the menu using on screen buttons
• When in a song page, it should play automatically
• The user should automatically scroll the webpage to show the corresponding lyrics on screen

Changing genres

• Open data.js
• Edit genreArray accordingly
• Define genre - the name of the genre
• and color - the color for the genre box

Adding songs

• Open data.js
• Edit genreSongs1,genreSongs2, genreSongs3 etc. accordingly
• Define nameHidden - the display name for the song selection
• Define color - the color for the song box
• Define name - the actual name of the song, displayed before the lyrics
• Define file - the location of the music file (by default it follows the format of assets/song[genre number][song number].mp3) (therefore put songs in the assets folder with the respective name (e.g. for the first song of the first genre it would be located in assets/song11.mp3))
• Define playFor - how long the song should play before it stops (to not reveal the missing lyric), this is measured in seconds
• Define lyrics - the lyrics to be displayed, each line should be separated with <br/>\<br/>\ as seen in the provided example data.js
• Define missingLyrics - the missing lyrics to be displayed further down the page (so it is hidden until revealed)

Preview