BAIN MUSC 540
Projects in Computer Music

Learning Web Audio

Return to: MUSC 540; Learning: SVG | Web Dev

1. HTML5 Audio
   • Reference
     • W3C
       • HTML5 {W3C}
         • 4.7.7 The audio element {W3C}
     • W3Schools (W3S)
       • HTML <audio> Tag {W3S}
       • HTML Audio/Video {W3S}
     • MDN, Using HTML 5 Audio and Video {MDN}
   • Tutorials
     • W3Schools, HTML5 Audio {W3S}
     • NewCircle Training, Intro to the HTML5 Audio Element {YouTube}
   • Audio Player
     • jPlayer - an HTML Audio & Video Player for jQuery
       • Tutorial
         • jPlayer Quick Start Guide {jPlayer.org}
2. Web Audio API
   • Reference
     • W3C, Web Audio API {W3C}
     • MDN, Web Audio API {MDN}
   • Open Access Textbook
     • Boris Smus, Web Audio API (Smus 2013) {O'Reilly}
   • Video Tutorial
     • Egghead, Intro to the Web Audio API {Egghead.io}
       
3. Web Audio API Frameworks
   • Tone.js {GitHub: Description | Add Ons; API | Examples}
     A Web Audio framework for making interactive music in the browser
     • Paper: Yotam Mann, Interactive Music with Tone.js {IRCAM}
   • Tune.js {GitHub}
     A microtonal web audio api tuning library
     • Paper: Bernstein and Taylor, Tune.js: A Microtonal Web Audio Library {GATech}
       • List of tunings {GitHub}
     • Demo app:
       • A Web Audio Microtonal Piano {GitHub}
     • See also:
       • Scala by Manuel Op de Coul
       • Xenharmonic Wiki
   • Gibberish.js {GitHub}
     Fast audio API for browser based audio content
     • Demos:
       • Gibberish Tests {CharlieRoberts.com}
     • See also:
       • Gibber {UCSB.edu}
       • Godfire Studios, Howler.js {GoldFireStudios}
4. Other Frameworks
   • See also: Learning jQuery & jQuery Mobile
   • Interface.js {CharlieRobers.com}
     A cross-platform library for touch, mouse and motion events oriented towards live performance
   • NexusUI.js {Website | GitHub | API Docs}
     A JavaScript library of HTML5 audio interface components that can control web audio or transmit OSC data to other applications such as Max or SuperCollider
     
     • Resources
       • Getting Started {Nexusosc.com}
       • nx-webAudio: A template for Web Audio projects using NexusUI {GitHub}
     • Articles
       • Paper: Simplified Expressive Mobile Development with NexusUI, NexusUp and NexusDrop {NIME 2014}
         • Slides: NexusUI Simplified Mobile Development {Allsonic.com}
   • Node.js {Website; About; Docs}
     An asynchronous event driven JavaScript runtime designed to build scalable network applications
     • Scribbletune {Scribbletune.com}
   • Zepto.js {Zeptojs.com}
     Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API
5. App Demos
   • 808 Cube {808cube.com}
   • Burk, WebAudio and WebMIDI Experiments
     • Simple Tone {SoftSynth.com}
   • Chrome Cube Lab {Chrome.com}
   • Conway's Melodies – Uses Conway's Game of Life to trigger sounds {CappelNorde.de}
   • Earslap, Touch Pianist {Earslap} – An HTML5 web browser experiment using HTML5 Canvas and WebAudio
   • NexusUI, Game of Reich: A minimalist exploration of the overtone spectrum using Conway's Game of Life and web audio {NexusUI}
   • Stuart Memo, QWERTY Hancock – An interactive HTML keyboard for web audio projects {StuartMemo.com}
   • Smus (2013) Examples {Webaudioapi.com}
   • Web Audio Demos {Webaudiodemos.appspot.com}
     • Web Audio Drum Machine {Webaudiodemos.appspot.com}
   • Chrome Music Lab {musiclab.chromeexperiments.com}
     • Strings
6. Web Audio Conference (WAC)
   • 2017 Queen Mary University London {QMUL}
   • 2016 Georgia Tech {GATech}
     • Proceedings {GATech}
   • 2015 IRCAM {IRCAM}
     • Program {IRCAM}
7. Misc. Articles, Blogs, Talks, Web Sites, etc.
   • Irina Papuc, Web Audio API: Why Compose When You Can Code? {Blog.Dougtesting.Net}
     An introduction to Web Audio API, Tone.js & NexusUI
     • Code Examples:
       • Three sine waves using Web Audio API {GitHub}
       • Tone.js Sampler w/ Nexus UI Control {GitHub}
   • Borgeat, Web Audio API Prototypes {Website}
   • Create Digital Music, Make Any Mobile Browser Into a Multi-Touch Music Controller (using NexusUI) {CDM}
   • Creative JS, Web Audio API: Getting Started {Creative JS}
   • Lowis, Web Audio Weekly
   • Memo
     • The Web Audio API: What Is It? {Tuts+}
     • Making Waves using the Web Audio API {YouTube}
   • Middle Ear Media, Web Audio API Basics Tutorial (Middle Ear Media} {Middle Ear Media}
   • Smus, Getting Started with Web Audio API." HTML 5 Rocks {HTML5 Rocks}
   • Ben Taylor's Website {Whitechord.org}
   • Wilson
     • A Tale of Two Clocks: Scheduling Web Audio with Precision {HTML5 Rocks}
     • Making the Web Rock: The Web Audio API {YouTube}
     • Google Developers Live at I/O 2013 {YouTube}
     • Chrome Developers: Web Audio
       • Part 1 {YouTube} | Part 2 {YouTube}

Reference

Smus, Boris. 2013. Web Audio API. O'Reilly Media. Sebastopol, CA. {GitHub | Code Examples}

Updated: September 7, 2019