# Visualizing musical tunings in the browser

One of my recurring intellectual joys is to learn about the deep connections between music and mathematics. About a decade ago, I discovered the amazing work of Gareth Loy, “Musimathics: A Guided Tour of the Mathematics of Music”, a generous 2-volume overview of the mathematics and physics underlying many different aspects of music, from waves to sampling to psychoacoustics. For a non-mathematician like myself, the maths in this book are easy to follow and the intuition is greatly helped by examples and diagrams. It has become one of my favourite references, which I’ve had the pleasure to offer to many of my similarly-minded friends.

One of the first subjects that fascinated me is the chapter about “Musical Scales, Tuning, and Intonation” that explains the evolution of tunings and temperaments from Pythagorean tuning to the contemporary 12-tet temperament, and sent me through the rabbit hole of microtonality experiments across musical cultures and scholarships. Growing up in Egypt, where microtonal maqam music has a long and established history, I especially appreciated the book’s mathematical exposition that allowed me to grasp the logical foundations of this musical culture.

It is in this spirit that I was motivated to create a Web Audio experiment that allows to play back various pieces in different temperaments - including recreating a historical microtonal tuning described by a 19th century French musicologist who studied Egyptian music practices at the time of Napoleon’s French campaign in Egypt, before the temperament of this region’s music was “normalized” (to use a gentle euphemism) to 24-tet in a famous music congress in Cairo in 1932.

Later, I came across beautiful circular diagrams representing musical rhythms, as pioneered by Godfried Toussaint. The clarity of these diagrams inspired me to recreate them for musical tunings, which also exhibit periodicity. Here’s the result, using Mike Bostock’s excellent Observable platform. You can click the notes to hear them:

## A quick introduction to the mathematics of tuning

The mathematics of tuning are quite simple, once the historical details are abstracted. Essentially, the problem that musicians face is to choose satisfactory intervals for their scales, that are a) pleasing to the ear, b) flexible enough to express the various emotions/meanings that they want to convey, and c) feasible on their instruments. Musical cultures and scholars have solved this problem in different ways over the ages, but some features are largely invariant and constitute the building blocks of most scales, because of the psychoacoustic features of human perception.

Musical pitches (notes) are specific frequencies of sound waves. Regardless of specific frequency, though, the human ear perceives **ratios** of frequencies (called *intervals*) as meaningful: given a note played at frequency *f*, the human ear will perceive another note at frequency *2f* as being equivalent in quality (called *chroma*) albeit of higher pitch. The ratio 2:1 is called the *octave* and constitutes the first invariant when building up a scale. Another significant ratio is the *perfect fifth* (ratio 3:2) which most musical cultures use as a point of tension in the melodic development, which tends to eventually resolve to the root *tonic* note.

From these humble beginnings, the puzzle of building up a scale is then to populate the interval 2:1 with many more notes that enrich the possibilities of musical expression. I refer the interested reader to the book above for an in-depth exposition, or indeed the multitude of online resources devoted to this subject (starting of course with the relevant Wikipedia article).

In the tuning diagram above, the circle represents a single octave, on which the intervals of various tunings are laid out according to their ratios. For example, the modern Western 12-tet temperament is made up of 12 equal intervals, each equal to the 12th root of 2 (i.e. ^{12}√2) which yields a perfect octave (2^{12⁄12} = 2), and an acceptably approximate fifth (within the psychoacoustic limits of human perception).

## Future work

I have encapsulated and enhanced the tuning logic of my Web Audio experiment into a JavaScript library which can be reused in Web applications. The plan is to use this library in my ongoing project to create a musician’s online notebook, which will allow for musical scores to be annotated and manipulated to enhance one’s understanding and expressive possibilities.