A simple JavaScript-powered karaoke script. The script takes in a multi-dimensional array of lyrics with specific timings for each word to be highlighted binded to a designated audio player element.

The script uses the Middleman framework. The app uses the following:

• Slim (HTML)
• Sass (CSS)
• CoffeeScript (JavaScript)
• jQuery 2.1.3

Although the script uses jQuery, the word-highlight animations are carried out with CSS3.

To build off the app using the current framework, one would need to know how to use Middleman to do so. It should be as easy as installing the framework using gem install middleman onto one's system and running middleman server or middleman build. More information can be found on the framework's website.

Otherwise, it would be perfectly fine to just edit the files in the /build directory in this repository to do simple tasks such as changing the audio player element to point to a specific track and adding the lyrics to the JavaScript. The only downside is that comments for the JavaScript are written in the CoffeeScript files. It might be helpful when reviewing example.js in the /build to check the example.js.coffee file in the /source folder for additional information.

To get karaoke demo going, one must set up the lyrics variable, set the settings variable (if desired), and then instantiate the Karaoke class. If no settings are supplied the script uses defaults.

The highlight styling can be changed in the karaoke.css file.

This application was built by Jake Larson to be implemented in the The Changing Story (to be released) eBook written by Linda Buturian, Susan Andre, and Thomas Nechodomu in the College of Education and Human Development at the University of Minnesota — Twin Cities.

Karaoke JS is released under the MIT License.