Hands-on Web Audio API Tutorial

This repository contains a step-by-step tutorial for learning the Web Audio API and music generation in the browser.

Overview

This project demonstrates how to create browser-based music generation applications using different approaches:

• Step 1: Basic audio generation using Web Audio API oscillators
• Step 2: Enhanced music generator with customizable parameters
• Step 3: AI-powered music generation using Magenta.js

Tutorial Steps

Step 1: Basic Web Audio API

A simple introduction to Web Audio API with:

• AudioContext creation
• Oscillator and gain node usage
• Basic note generation with random pitches from a C major scale

Step 2: Enhanced Music Generator

Building on Step 1 with:

• UI controls for all audio parameters
• Multiple oscillator types (sine, square, sawtooth, triangle)
• Adjustable duration, volume, interval, and note count
• Option to play individual notes or generate sequences

Step 3: AI Music Generation with Magenta.js

An introduction to machine learning-based music generation:

• Using Google's Magenta.js library
• Loading pre-trained MusicVAE models
• Generating and playing musical sequences

Getting Started

Each step is contained in its own directory with all necessary files:

1. Open any of the step0X/index.html files in a modern web browser
2. Click the "Generate" button to create music
3. Experiment with different parameters (in Step 2)

Browser Compatibility

This tutorial requires a modern browser with Web Audio API support, such as:

• Chrome
• Firefox
• Safari
• Edge

Resources for Learning More

• MDN Web Audio API Documentation
• Google Magenta Project
• Web Audio API Specification