Here are some examples of dynamic web-based music interfaces that have been developed in the lab, using packages built on the Web Audio API. For pedagogical purposes, we have used mostly basic JavaScript, left comments in the code, and avoided optimizations like minifying. If you make JSFiddles, CodePens, or your own standalone interfaces based directly or indirectly on what you find below, please feel free to share them with us to enhance the pedagogical experience!
To rework/extend the above demos, you'll need to understand how to program in HTML, CSS, JavaScript, PHP, and Node.js, with the most important of these being JavaScript.
Most of the demos above are entirely client-side. This means you can get a demo's code and associated resources by navigating to it and selecting File -> Save Page As...
Or, if you prefer to explore the code without downloading it, you can navigate to a demo and select (in Firefox) Tools -> Web Developer -> Page Source. (Chrome has something similar.)
Analyser, Recording piano, and Player are the easiest demos to explore and understand in terms of the programming concepts involved. DJ and Keyscape use more object-oriented programming.
A book like Learning Processing by Daniel Shiffman is a good place to start if you're new to programming. It covers the fundamentals in the first twelve chapters or so, with examples coded in a simplified version of Java called Processing. One really needs to learn JavaScript – not Java or Processing – in order to develop dynamic web-based (music) interfaces. Happily, OpenProcessing and p5.js exist to ease the transition.
Solutions to most questions/issues regarding HTML, CSS, JavaScript, PHP, and Node.js can be found on W3Schools or Stack Overflow.
I hope you enjoyed experimenting with these examples.
Feel free to get in touch (tom.collins@york.ac.uk) if you have any
questions or suggestions.
The code in these examples was written by Tom Collins and others as specified toward the bottom of each interface. Reuse of the code is welcomed, and governed by the GNU General Public License Version 3 or later.