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

Abstract

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.

Handout

Presentation Handout (pdf)

PC Polygon Assistant

Screenshot of PC Polygon Assistant

Visit the MUSC 525 Post-Tonal Theory website

Tools

• Scalable Vector Graphics (SVG)
  A markup language for 2D graphics applications and images W3C: <http://www.w3.org/Graphics/SVG/>

• WebAudio API
  A high-level JavaScript API for processing and synthesizing audio in the browser <http://www.w3.org/TR/webaudio/>
  Web Audio Working Group: <http://www.w3.org/2011/audio/>

• jQuery Mobile: A touch-optimized Web framework
  <http://jquerymobile.com>

• jQuery: A JavaScript library that makes event handling, animation, etc. simpler
  <http://jquery.com>

• Tone.js by Yotam Mann A web audio framework for making interactive music in the browser
  <http://github.com/Tonejs/Tone.js>

• Tune.js by Andrew Bernstein & Ben Taylor A web audio tuning library of microtonal and just intonation scales
  <http://github.com/abbernie/tune>

• NexusUI by the LSU Experimental Music and Digital Media Program
  A JavaScript toolkit of HTML5 audio interfaces in the browser
  <http://www.nexusosc.com>

• MAMP: My Apache - MySQL – PHP: A localhost server for OS X & Windows
  <http://www.mamp.info>

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>.

References

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.