

Workshop Fee: $300.00
Materials Fee: None
REGISTER
The web is transforming the way we experience music. So let’s use the web to design new music experiences. In the process, we'll learn about p5.js, a JavaScript library that reimagines Processing's creative code methodologies for the web.
Create audio-reactive online music visualizations. We’ll use p5.js and p5.sound.js to bring the Processing approach to Web Audio. Learn digital audio concepts through interactive, tinkerable code examples. We'll share methods for mapping sound data to meaningful visuals, and collaborate to create new music visualizations.
Skill Level: Intro/Intermediate
No experience necessary, though some familiarity with code (especially Processing / p5 / JavaScript), and/or sound may be helpful.
Overview/Outline
• Introduce p5, p5.sound, the Web Audio API, and the concept of music visualization
• Brainstorm visualization ideas
• Demonstrate a few digital audio concepts through interactive examples and code
• Cover sound sources (microphone, soundfile, synthesized sound), and analysis (amplitude, frequency spectrum)
• Code/create a template for sound-reactive visuals
• Start hacking
We’ll set aside some time at the end of the workshop for participants to share what they’ve made with the group. I’ll also have a centralized place to share links to what we made.
Other concepts/code examples that may be addressed given time & interest include:
• Peak detection
• Generating and working w/ lyric files (or other timestamped data)
• Synthesizing musical patterns and mapping them to visuals
• Using the p5.dom library to add a drag-and-drop area for mp3s
• Loading music from external API’s
• Recording sound
What to Bring
• Bring a laptop!
• An up-to-date web browser. Firefox or Chrome are recommended for the most comprehensive Web Audio support.
• A code editor
• Headphones
• Also a pen and paper to sketch out your ideas