Introduction
I have been both a software developer and a casual musician playing worship songs at church. Often I come across church members who want to play music without knowing the chords, or notes for a certain piece of music. As for myself, because of many trials and errors, I have figured out a way how to select chords but I know many still require to have chords written down ahead of time. Being the software developer I am, I know this is a computer science problem as music is both artistic and logical.
In assembling together an app, there were a couple of problems I have to tackle:
- How do we notate the numbered notation(Jian Pu) digitally?
- How do we interpret the meaning of the notation so we can do further calculations in music?
With those two questions tackled, I can do all sorts of “cool” features such as transposing, generating different harmonies, transcribing into another notation system etc.
Breakthrough
To tackle the first question, regarding numbered notation annotation, I explored appending lines, and phrases and other markers visually onto actual numbers to achieve the look of the notation. But that is just very cumbersome and hard to manipulate.
After some google searches, I found out that there are a few archaic numbered notation system that is on Window operation system and are built for print. They rely on special fonts and special keyboards and do not translate well across platforms.
But if, just if I can pack all the numbered notation information into a single font that would be neat, as I can then store the information more conveniently into the database. It turns out that such a font exists! Not only that, it turns out there are also fonts for chords and guitar chords!
After importing it onto css, I was able to render it on the screen easily. With it being a font, it inherits all the properties and goodies of the web such as color, responsive-font-sizing, wrapping etc. DEMO
Now that I can represent the numbered notation in font, I can then solve the second problem that is to interpret the musical values of the notes by parsing the text.
The idea is relatively simple, although the actual parsing took some careful experimentation. In short, I have used a lookup table to build a directory of values. After that, there’s a series of switch, if and while statements to turn then into MIDI format, or other music representational language such as musicxml, abcnotation, etc.
Here’s the result of the melody turned into MIDI and then with post-production via iPhone GarageBand.
https://s3-us-west-2.amazonaws.com/bin.tcog.hk/Love+song+of+heaven+and+earth.mp3
And here’s another example of parsing and transcribing into ABCNotation
Transposing Chords
Transposing chords are done simply via Regular Expressions:
function transposeChord(chord, amount) {
var scale = [“C”, “C#”, “D”, “E@”, “E”, “F”, “F#”, “G”, “A@”, “A”, “B@”, “B”]
var normalizeMap = {“Cb”:”B”, “D@”:”C#”, “D#”:”E@”, “F@”:”E”, “G@”:”F#”, “G#”:”Ab”, “A#”:”B@”, “E#”:”F”, “B#”:”C”}
return chord.replace(/[CDEFGAB](@|#)?/g, function(match) {
var i = (scale.indexOf((normalizeMap[match] ? normalizeMap[match] : match)) + amount) % scale.length;
return scale[ i < 0 ? i + scale.length : i ];
})
} function calculateKeyDistance(a,b){
var scale = [“C”, “C@”, “D”, “E@”, “E”, “F”, “F#”, “G”, “A@”, “A”, “B@”, “B”]
var normalizeMap = {“C@”:”B”, “D@”:”C#”, “D#”:”E@”, “F@”:”E”, “G@”:”F#”, “G#”:”A@”, “A#”:”B@”, “E#”:”F”, “B#”:”C”}
a = a.replace(/[CDEFGAB](@|#)?/g, function(match){
return scale.indexOf((normalizeMap[match] ? normalizeMap[match] : match))
})
b = b.replace(/[CDEFGAB](@|#)?/g, function(match){
return scale.indexOf((normalizeMap[match] ? normalizeMap[match] : match))
})
return parseInt(a) + parseInt(b)
}
The result is amazing, however, and extremely useful!
Try It Yourself!
That’s it! You can also try to build your very own numbered notation songs as well through this link. http://j.tcog.hk/
This project is being endorsed by the Church of God in Hong Kong and Lifespring Publisher.
