Projects

ChordSheets

Summary

ChordSheets is a web app that allows you to create, edit, save, and play along with musical chord sheets in an interactive manner!

The app is written using Angular 4, Javascript, HTML5, and CSS.

Chord Sheets utilizes object-oriented (OOP) principles, as each sheet is a data structure of nested objects. Each Chord box is an object, and each Bar / Row is a different type of object.

Simply enter in the song length and bpm, then click initialize rows. An empty chord sheet will be created which you can edit and save.

By clicking on the individual beats or lyric section, you can edit them. Press ENTER to save your edit. You can press TAB to insert an autocompleted chord, then press ENTER. Clicking outside the bar including the autocomplete will cancel the edit.

The app is split into two main areas, the controls and the actual music sheet. The bars/rows are created as an array that is dynamically updated via Angular 4, and most of the functions use that to their advantage.

The initialize rows button calculates the amount of bars needed at the specific bpm and song length, and then creates a new sheet array object with those.

The add row button simply adds a new row to the sheet by pushing a new ChordRow object to the array.

The play button uses jQuery to loop through the created elements and animate a progress bar to show your progress. The speed of the bar is directly linked to the bpm and number of bars which allows you to keep track of your place in the song accurately.

The save button locally saves all the information supplied to localstorage in the browser. This allows you to keep your work until you write over it!

jmete3@gmail.com
© James Mete 2017