BAIN ATMI 2012 (San Diego) iPad Web App Development for Music Theory

Abstract

Multi-Touch technology has transformed the way we want to interact with applications. This paper will discuss techniques and strategies for taking existing Web-based applications for undergraduate music theory and adapting them to take advantage of the iPad’s built-in hardware features. The iPad’s multi-touch interface, multimedia capabilities, and larger screen are just some of the features that make it an ideal platform for such applications. Rather than building iPad (iPhone) apps using application programming interfaces (APIs) like Objective-C or Cocoa Touch, which have rather steep learning curves, educators may develop compelling instructional content using the Web standards HTML5, CSS3, and JavaScript which are comparatively easier to learn, maintain, and enhance over time.

Web App Demos

The following two Web apps demonstrate how educators might use HTML5, CSS3, and JavaScript to create simple music theory applications for the iPad and iPhone, respectively. The first demo app employs jQuery, an open source JavaScript library that greatly simplifies the implementation of dynamic HTML effects. It also uses a jQuery plug-in that implements page swipes (Matt Bryson'sTouchSwipe). The second demo app employs jQuery Mobile, a touch-optimized JavaScript framework that allows Web apps to run seamlessly on a wide variety of mobile devices.

1. Contextual Analysis of Chorale Phrase Harmonizations by J.S. Bach for iPad

This iPad Web app was created for MUSC 116 Music Theory II to allow the student to interactively explore 7 chorale phrase harmonizations by J.S. Bach. It was designed to serve as an interactive online answer key for MUSC 116 Worksheet 7-3 (pdf). Students are challenged to apply what they learned in lecture about the phrase model (Laitz 2011) and contextual analysis (Clendinning and Marvin 2011) to these 7 phrases. The app presents the student with five views of each phrase: 1. SATB score; 2. Roman numeral analysis; 3. Contextual analysis (Roman numerals; phrase-model symbols T, PD & D and expansion lines; and cadence ID); 4. S-B counterpoint (Kostka and Payne 2013); and 5. S-B counterpoint analysis. Two recordings are provided for each phrase: SATB and S-B. Students are also asked to sing each line along with the app's playback. The analytical commentary accompanying each example reviews important concepts presented in the reading and lecture.

2. Ratio to Cents for iPhone

This simple iPhone Web app allows the student to convert a frequency ratio to cents on an iPhone. The app also works on other phones, iPads, other tablets, and desktop computers, but is optimized for an iPhone display. The app uses the following conversion formula:
c = 1200 * log₂(f₂/f₁)

where c is cents, and f₂/f₁ is a pitch interval expressed as a frequency ratio (Campbell and Greated 2001, p. 79). The student enters a frequency ratio (e.g., 2/1, 3/2, 2/3, 5/4, 5/3, 6/5, etc.) and the app calculates the interval's equivalent size in cents. (By convention, there are 1200 cents in an 2/1 octave. Thus, there are 100 cents in an twelve-tone equal-tempered (12tet) semitone, and a cent = 1/100 12tet semitone.) Cents allow the sizes of intervals in various tunings and temperaments to be easily compared.The app also calculates the interval's decimal equivalent. All values are rounded to 3 decimal places.

Example:
An upward just perfect fifth (P5), whose frequency ratio is 3/2, is equivalent to 702 cents (i.e. 701.955 rounded to the nearest cent). A downward just perfect fourth (3/4) is approximately -498 cents. In twelve-tone equal temperament (12tet), a P5 spans 7 semitones, thus an 12tet P5 is equivalent to 700 cents. A just P5 is approximately 2 cents larger than a 12tet P5. A P4 spans 5 semitones (500 cents), so a just P4 is approximately 2 cents smaller than an 12tet P4.

Bibliography

Ambrose, Z. Philip. Texts for the Complete Vocal Works [of J.S. Bach] with English Translation and Commentary. Available online at: http://www.uvm.edu/~classics/faculty/bach/

Bach, Johann Sebastian, and Albert Riemenschneider. 1941. 371 Harmonized Chorales and 69 Chorale Melodies with Figured Bass. New York: G. Schirmer.

Benjamin, Thomas. 2003. The Craft of Tonal Counterpoint, 2nd ed. New York: Routledge.

Campbell, Murray, and Clive A. Greated. 2001. The Musicians' Guide to Acoustics. Oxford: Oxford University Press.

Clendinning, Jane Piper and Elizabeth West Marvin. 2011. The Musician's Guide to Theory and Analysis, 2nd ed. New York: Norton.

Cone, Edward T. 1960. "Analysis Today." The Musical Quarterly 46/2 (Apr., 1960): 172-88.

Hadlock, Kris. 2012. jQuery Mobile: Develop and Design. Berkeley, CA: Peachpit Press.

Kostka, Stefan, Dorothy Payne and Byron Almén. 2013. Tonal Harmony: With An Introduction to Twentieth-Century Music, 7th ed. New York: McGraw-Hill.

Laitz, Steven. 2011. The Complete Musician: An Integrated Approach to Tonal Theory, Analysis, and Listening, 3rd ed. New York: Oxford.

Little Web Hut. JavaScript & jQuery Video Tutorials: Learn How to Make Dynamic Web Pages. Available online at:
http://www.littlewebhut.com/javascript/

MacDonald, Matthew. 2011. HTML5: The Missing Manual. Sebastopol, CA: O'Reilly Media.

McFarland, David Sawyer. 2009. CSS: The Missing Manual, 2nd Edition. Sebastopol, CA: O'Reilly Media.

_______________________. 2011. JavaScript & jQuery: The Missing Manual, 2nd Edition. Sebastopol, CA: O'Reilly Media.

Stark, Jonathan. 2010. Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa. Sebastopol, CA: O'Reilly.

iPad Web App Development for Music Theory

Abstract

Handout

Web App Demos

Links

J.S. Bach Chorale Harmonizations

jQuery & jQuery Mobile

TouchSwipe jQuery Plugin

Tutorials

Web-App Development Reference

Tools used in Project

Apple iOS Developer Center

Bibliography