Ovation. Do-it-yourself chord table using JS and HTML5

Idea

I wondered somehow with the aim of shaping my own web chord sign with the goal of telling the person what they were eating these chords with.

Yes, I didn’t want a simple sign, but a feature that I could do:

• play selected chord
• show chord diagram
• display a chord on a virtual synth keyboard
• build comfortable enough chord fingering
• easy to transfer from one machine to another

And that's how I did it ...

Facilities

By virtue of the last point of the plan of the conceived possibilities, I decided that I would do everything entirely with the help of JavaScript.
To output the sound, I used HTML5 audio as the most promising technology. Simply put, I didn’t smile at all about messing with Flash integration, which I, as an amateur with OpenSource, always treated with some suspicion.
For rendering chord fingering, the HTML5 canvas was perfect, because I needed a freely scalable chord grid.

Implementation

The first thing was made a simple virtual keyboard. The keys are many divs with onClick events, the slider is made using jQuery-UI.
')


Then the table of chords was added, the player of simple melodies (melodies are written as a set of notes and delays between them in milliseconds), a guitar finger viewer.

Problems and Solutions

Sound

As it always happens, the first problems appeared with the first successes in the work on the project. Initially, playing chords was made very simple: when loading a page, JS generated 49 audio elements — one for each synthesizer key, each with a corresponding sound clip. And everything would be fine, only, as it turned out, neither Chrome, nor Opera could digest 49 open audio streams, some notes were simply eaten. I solved the problem very simply: I limited the number of audio elements to 8, with the load on them distributed over the round-robin. The obvious disadvantage of such a scheme is the need to change the source of the audio elements. Yes, it is not a problem on the local machine, but uploading sound files from the server is not at all instantaneous. In order to minimize this kind of delay to a minimum, I used preloading audio files into the browser cache. Made it very simple. An additional audio element is created, to which all the audio files that will be used by the keyboard are sequentially transferred. Delays, of course, remained, but they are already quite tolerant.

Guitar Chord Fingering

Another important problem for me was guitar fingering. And here it’s not even a beautiful drawing of a chord grid, which is more tedious than complex. The point in the selection of comfortable fingering.

The criteria of convenience highlighted by me:

• “Length” chord. The number of frets that a chord occupies on the neck of the guitar. Here the obvious limit is 5 frets, it is very difficult to reach further.
• "Width" chord. The distance between the highest and lowest clamped string. Beginners are much harder chords that affect the neck across the entire width, including barre chords. It is worth considering.
• The number of fingers to clamp the strings. Very important parameter. A simple chord rather consists of just a couple of sandwiched strings. The exception may be barre chords, so for them I asked a fixed slight increase in complexity, and I consider barre with one finger. The maximum number of fingers used was set to 4 due to the fact that the left thumb is not used by all guitarists.
• The number of non-playing strings. It gives a small contribution to the complexity of the chord, because It is difficult for beginners to get on a specific part of the neck.
• The number of single non-playing strings (except 1 and 6). This parameter is much more important than the previous one. It is more difficult to follow the muting of individual notes inside a chord than muting, for example, 6 strings, or even 6.5 and 4 strings together.
• The location of the chord on the fingerboard. If possible, we will issue chords in an open position.

All this was valiantly inscribed in one formula, which selects the most suitable guitar chord fingering for my table. Generated by the C chord fingering script:

Selection of the fingering can still slow down the application a little, because There is a complete search of chord notes on the strings. The problem is not very acute for the reason that the selection takes place in a separate thread through Web Workers.

results

As a result, I got a convenient tool for finding and building chords, searching for suitable fingering, which is not a shame to show to the person above. The project code is available on github.com under the license CC BY-NC-SA 3.0 . I would be grateful for any help with the project, whether it is valuable advice or ready-made patch.
You can try the code in the work directly on github: demo .