Skip to content

Instantly share code, notes, and snippets.

@cbenz
Last active February 22, 2017 13:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cbenz/e578e2909b5b9455675dec5b62babc84 to your computer and use it in GitHub Desktop.
Save cbenz/e578e2909b5b9455675dec5b62babc84 to your computer and use it in GitHub Desktop.
Music Chords Charts in Elm - abstract of the talk

This talk is about music but is not restricted to musicians!

When playing an instrument in a jam session, musicians sometimes need to see the chords of the tune they are playing. A chords chart is a convenient way to represent a music tune as a table, containing chord names in "Jazz notation", but not music notes. Chords charts are scattered on forums, are static images most of the time, and there are many versions of which some are wrong.

These drawbacks led me to start the Open Chords Charts project. The backend is a centralized and collaborative database of chords charts. The frontend, written in Elm, allows to browse charts, add/edit them, fork other users charts, fix errors and make links between charts. I'll show some features such as changing the key in which the song is displayed – a killer feature for musicians who dislike to do the transformation in their head. The frontend is responsive and offline-first, so that musicians can build a set-list and follow the songs on their mobile phone while playing in "Le Caveau de la Huchette" Jazz club! Also, it uses the web audio API to allow hearing the chords while editing the chart.

Chords charts are full of implicit conventions well known by musicians and there is no formal standard to rely upon. That's why I started by collecting several representative examples from the real world. You'll discover that after having identified the fundamentals patterns composing a chords chart, I compiled them into a "grammar" Markdown file, with a description and an image for each. I'll show how I turned this grammar file into a Music package with the ChordChart data type and its functions.

As a bonus, I'll show the "Domain Specific Language" used to represent chords charts in a human-readable way, and how I used the elm-tools/parser package to parse it.

As the project is free software, I encourage pull requests, and you're welcome to create and share your own chords charts on the collaborative website!


Christophe Benz is a software developer who likes elegant and efficient tools, and is against any kind of fatigue. In that sense he felt in love with Elm in 2016.

He's also a Jazz pianist who organizes and plays in jam sessions, where chords charts are cheat sheets to play songs. He launched the Open Chords Charts project to combine his two passions.

Christophe is a software developer at Etalab, a French Prime Minister administration in charge of OpenData and digital services, in Paris. He co-developed the front-end of the Open Government Toolbox in Elm.

@koudonojinchuu
Copy link

par "fatigue" tu veux dire "useless cognitive load"?
je pense que c'est bon, moi j'avais pas rencontré le terme "fatigue" hors du domaine médical, ou de la physique des matériaux
Mais sinon ouais, c'est bien ☺
c'est clair, concis, et sympa à lire

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment