2016 ATMI National Conference
Santa Fe, NM

October 29, 2016

Scripting Web Apps for Music Theory
using SVG & Web Audio API

Reginald Bain, Professor
Composition and Theory
School of Music
University of South Carolina
813 Assembly St.
Columbia, SC 29208 USA


Scalable Vector Graphics (SVG) and Web Audio API are two powerful web-browser technologies that may be used to create interactive web apps for music theory. This paper discusses a JavaScript web app for geometrical music theory that employs SVG and Web Audio API. The app generates an interactive 12-tone equal tempered pitch-class clockface diagram, a traditional model for pitch-class space in post-tonal theory, that uses SVG to display all possible polygon diagrams and Web Audio API to play a given polygon’s associated chord and rhythmic timeline.


Presentation Handout (pdf)

PC Polygon Assistant


Screenshot of PC Polygon Assistant

Visit the MUSC 525 Post-Tonal Theory website


Documentation and Tutorials

Aldunate, Joaquín. 2016. "Web Audio API: Why Compose When You Can Code?" Toptal Engineering Blog. Available online at: <http://www.toptal.com/web/web-audio-api-tutorial>.

Jenkov.com. 2016. SVG Tutorial. Available online at: <http://tutorials.jenkov.com/svg/>.

Mozilla Developer Network. 2016. SVG Documentation. Available online at: <https://developer.mozilla.org/en-US/docs/Web/SVG>.

_______________________. 2016. Web Audio API Documentation. Available online at: <https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API>.


Allison, Jesse, William Conlin, Daniel Holmes, Yemin Oh, and Ben Taylor. “Simplified Expressive Mobile Development with NexusUI, NexusUp and NexusDrop.” NIME 2014: International Conference on New Instruments for Musical Expression Proceedings. London, England. Available online at: <http://whitechord.org/Expressive_Mobile_Development_NexusUI.pdf>.

Bernstein, Andrew and Benjamin Taylor. 2016. “Tune.js: A Microtonal Web Audio Library.” 2nd Web Audio Conference (WAC) Proceedings. Atlanta: GA TECH. Available online at: <http://smartech.gatech.edu/handle/1853/54580>.

Eisenberg, J. David and Amelia Bellamy-Royds. 2014. SVG Essentials, 2nd ed. Sebastopol, CA: O'Reilly Media. Read the 1st edition (2002) of the book online at: <http://commons.oreilly.com/wiki/index.php/SVG_Essentials>.

Keith, Michael. 1991. From Polychords to Polya: Adventures in Musical Combinatorics. Princeton: Vinculum Press.

Mann, Yotam. 2015. “Interactive Music with Tone.js.” 1st Web Audio Conference (WAC) Proceedings. Paris, France: IRCAM & MOZILLA. Available online at: <http://medias.ircam.fr/x9d4352>.

Morris, Robert. 1987. Composition with Pitch Classes. New Haven: Yale University Press.

Rahn, John. 1980. Basic Atonal Theory. New York: Longman.

Smus, Boris. 2013. Web Audio API. O'Reilly Media. Sebastopol, CA. Read online at O’Reilly Atlas: <http://chimera.labs.oreilly.com/books/1234000001552/>.

Straus, Joseph N. 2016. Introduction to Post-Tonal Theory, 4th ed. New York: Norton.

Toussaint, Godfried T. 2013. The Geometry of Musical Rhythm: What Makes a "Good" Rhythm Good? Boca Raton, FL: CRC Press.

Tymoczko, Dmitri. 2011. A Geometry of Music: Harmony and Counterpoint in the Extended Common Practice. New York: Oxford University Press.