A comprehensive 4.5-hour workshop introducing beginners to web audio development using HTML, Tone.js, NexusUI, and p5.js.
This workshop teaches the fundamentals of creating interactive audio applications in the browser. Students will learn:
- HTML5 Audio Basics - Understanding web audio fundamentals
- Tone.js - High-level audio synthesis and effects
- Signal Flow - How audio nodes connect and process sound
- Interactive Controls - Building user interfaces for audio parameters
- MIDI Integration - Connecting hardware controllers
- Audio Analysis - Visualizing sound with p5.js
- Sequencing - Creating patterns and rhythms
- No prior programming experience required! This workshop starts from the basics.
- Basic computer literacy (file management, web browsing)
- A modern web browser (Chrome, Firefox, or Edge recommended)
- A code editor (VS Code recommended - download here)
- MIDI controller/keyboard for Example 5
- Headphones for better audio experience
If you're completely new to HTML/CSS, spend 30 minutes with our UI Fundamentals section before the workshop. Don't worry - we'll cover the basics during the introduction!
-
Clone or download this repository
-
Open any example folder in your code editor
-
Start a local server (required for loading audio files):
Using Python:
# Python 3 python -m http.server 8000 # Python 2 python -m SimpleHTTPServer 8000
Using Node.js:
# Install http-server globally npm install -g http-server # Run server http-server -p 8000
Using VS Code:
- Install "Live Server" extension
- Right-click on
index.html→ "Open with Live Server"
-
Open your browser to
http://localhost:8000 -
Navigate to any example to start exploring!
Examples 00-05 can be opened directly in your browser by double-clicking index.html. However, examples 06-08 require a local server due to CORS restrictions when loading audio files.
New to HTML/CSS? Start here! We've created a comprehensive UI Fundamentals section covering:
- HTML Structure - Document structure, semantic elements, form controls
- CSS Basics - Styling, colors, typography, box model
- Flexbox Layouts - Modern responsive layouts
- NexusUI Basics - Touch-optimized audio controls
- Frameworks Comparison - Choosing the right tools
During the workshop, we'll introduce HTML/CSS concepts as needed, but having this foundation will help you focus on the audio aspects.
Click to expand: Essential HTML/CSS for this workshop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Audio App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Synthesizer</h1>
<button id="playBtn">Play</button>
<input type="range" id="freq" min="20" max="2000" value="440">
<script src="https://cdn.jsdelivr.net/npm/tone@latest/build/Tone.js"></script>
<script src="script.js"></script>
</body>
</html><!-- Buttons -->
<button id="playBtn">Play</button>
<!-- Sliders -->
<input type="range" id="volume" min="0" max="100" value="50">
<!-- Number inputs -->
<input type="number" id="bpm" min="60" max="200" value="120">
<!-- Dropdowns -->
<select id="waveform">
<option value="sine">Sine</option>
<option value="square">Square</option>
</select>
<!-- Labels -->
<label for="volume">Volume</label>
<!-- Containers -->
<div class="control-panel">
<!-- Controls go here -->
</div>/* Selectors */
.className { } /* Class selector */
#idName { } /* ID selector */
button { } /* Element selector */
/* Layout with Flexbox */
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 20px; /* Space between items */
}
/* Styling buttons */
button {
padding: 10px 20px;
background-color: #667eea;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #5568d3;
}
/* Custom slider styling */
input[type="range"] {
-webkit-appearance: none;
width: 200px;
height: 6px;
background: #ddd;
border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #667eea;
border-radius: 50%;
cursor: pointer;
}// Get elements
const button = document.getElementById('playBtn');
const slider = document.getElementById('freq');
// Listen for events
button.addEventListener('click', function() {
console.log('Button clicked!');
});
slider.addEventListener('input', function() {
const value = this.value;
console.log('Slider value:', value);
});
// Update text content
document.getElementById('display').textContent = '440 Hz';For more details, see the complete UI Fundamentals section.
Building blocks of web audio synthesis
- Introduction to HTML5
<audio>element - Understanding browser audio basics
- Concepts: Audio elements, playback controls, loading sounds
- Creating your first synthesizer tone
- Controlling pitch with a slider
- Concepts: Tone.Oscillator, frequency, waveforms
- Adding volume control to your oscillator
- Understanding signal flow
- Concepts: Tone.Gain, signal routing, amplitude
- Shaping tone with a low-pass filter
- Separate JavaScript file organization
- Concepts: Tone.Filter, cutoff frequency, resonance, code structure
Making sounds dynamic and expressive
- Shaping sound over time with envelopes
- Button-triggered notes
- Concepts: Attack, Decay, Sustain, Release, Tone.AmplitudeEnvelope
- Playing notes with a MIDI keyboard
- Virtual keyboard fallback
- Concepts: Web MIDI API, note-on/note-off, velocity, MIDI channels
Working with recorded audio
- Loading and triggering audio files
- Understanding Tone.Player
- Concepts: Audio buffers, sample playback, file loading
- Adding reverb, delay, and filter to samples
- Effect parameter control
- Concepts: Tone.Reverb, Tone.FeedbackDelay, wet/dry mix, effect chains
- Analyzing audio with p5.js
- Real-time waveform, spectrum, and amplitude display
- Concepts: Tone.Waveform, Tone.FFT, Tone.Meter, canvas drawing
Polyphony, modulation, and sequencing
- Creating chords with multiple oscillators
- Detuning for richer sounds
- Concepts: Polyphony, harmony, chorus effect, detuning
- Using Low Frequency Oscillators to modulate parameters
- Vibrato, tremolo, and filter sweeps
- Concepts: Tone.LFO, modulation, vibrato, tremolo, automation
- Creating rhythmic patterns
- Programming melodies and beats
- Concepts: Tone.Transport, Tone.Sequence, BPM, step sequencing, timing
Students experiment with examples and ask questions
- Start with Example 00 to understand HTML5 audio
- Work through Examples 01-03 to grasp synthesis basics
- Practice Examples 04-05 to understand envelopes and MIDI
- Explore Examples 06-08 to learn sample manipulation
- Experiment with Examples 09-11 for advanced techniques
| Example | Core Concepts | Difficulty |
|---|---|---|
| 00 | HTML5 Audio, Playback | ⭐ Beginner |
| 01 | Oscillators, Frequency | ⭐ Beginner |
| 02 | Gain, Signal Flow | ⭐ Beginner |
| 03 | Filters, File Organization | ⭐⭐ Beginner+ |
| 04 | Envelopes, ADSR | ⭐⭐ Intermediate |
| 05 | MIDI, External Input | ⭐⭐⭐ Intermediate |
| 06 | Audio Files, Buffers | ⭐⭐ Intermediate |
| 07 | Effects Chains, Processing | ⭐⭐⭐ Intermediate |
| 08 | Audio Analysis, Visualization | ⭐⭐⭐ Intermediate+ |
| 09 | Polyphony, Chords | ⭐⭐⭐ Intermediate+ |
| 10 | Modulation, LFOs | ⭐⭐⭐⭐ Advanced |
| 11 | Sequencing, Timing | ⭐⭐⭐⭐ Advanced |
-
Tone.js - Web Audio framework
- High-level synthesis and effects
- Built on Web Audio API
- Scheduling and timing utilities
-
p5.js - Creative coding library
- Canvas-based visualization
- Used in Example 08 for audio analysis
- Web Audio API - Browser audio processing
- Web MIDI API - MIDI device connectivity (Example 05)
Understanding how audio flows through nodes:
Basic Synthesis (Examples 01-04):
Oscillator → Gain → Destination
With Filter (Example 03):
Oscillator → Filter → Gain → Destination
With Envelope (Example 04):
Oscillator → AmplitudeEnvelope → Destination
Sample Playback (Example 06):
Player (Audio File) → Destination
With Effects (Example 07):
Player → Filter → Delay → Reverb → Destination
LFO Modulation (Example 10):
LFO ↘
→ Filter.frequency
Osc ↗
Sequencer (Example 11):
Transport (Clock) → Sequence → Synth → Destination
- Measured in Hertz (Hz)
- Middle C (C4) = 261.63 Hz
- Doubling frequency = up one octave
- Volume control
- Usually 0.0 (silent) to 1.0 (full volume)
- Can go higher but may cause distortion
- Frequency where filtering begins
- Low-pass filter: allows frequencies below cutoff
- Typical range: 20 Hz to 20,000 Hz
- Attack: Time to reach full volume
- Decay: Time to drop to sustain level
- Sustain: Held volume level
- Release: Time to fade to silence
- Check your browser console for errors (F12)
- Click "Start Audio Engine" button (required by browsers)
- Check your system volume and browser tab isn't muted
- Try a different browser (Chrome/Firefox recommended)
- Connect MIDI device before opening the page
- Check browser supports Web MIDI (Chrome, Edge)
- Use the virtual keyboard as fallback
- Grant MIDI access when prompted
- Make sure you're using a local server (not file://)
- Check audio file paths are correct
- Download sample files (see resources/audio-samples/README.md)
- Check browser console for CORS errors
- Clear browser cache and reload
- Check all script tags are loading
- Ensure you clicked "Start Audio Engine"
- Try opening in incognito/private mode
- Modify Example 01: Change waveform type (sine, square, triangle, sawtooth)
- Extend Example 02: Add a second oscillator at a different frequency
- Enhance Example 03: Add filter resonance control
- Customize Example 04: Create different envelope shapes (slow attack, fast release)
- Example 05: Play chords (multiple notes) with MIDI
- Example 07: Chain multiple effects together
- Example 08: Add different visualization styles
- Example 09: Create a full chord progression (C-F-G-C)
- Example 10: Modulate multiple parameters simultaneously
- Example 11: Extend to 8 or 16 steps
- Combine examples: Add LFO modulation to the sequencer
- Create new example: Build a simple drum machine using multiple samples
Students can extend these examples by:
- Adding visual themes and custom styling
- Implementing preset systems (save/load settings)
- Creating more complex effect chains
- Building complete instruments
- Adding recording/export functionality
- Implementing more sophisticated sequencing
- Creating generative music systems
This workshop material is provided for educational purposes.
Libraries Used:
- Tone.js - MIT License
- p5.js - LGPL License
Audio Samples: See individual attribution in resources/audio-samples/README.md
Found a bug or have a suggestion? Students and instructors are encouraged to:
- Report issues with specific examples
- Suggest improvements to explanations
- Share additional exercises
- Contribute new examples
Created for Audio Design B.A. students new to web audio programming.
Special Thanks:
- Tone.js community
- p5.js Foundation
- Web Audio API working group
- All open-source contributors
Happy Sound Making! 🎵
Remember: The best way to learn audio programming is to experiment, make mistakes, and have fun!