plyght/tonejs-skill

Overview

This skill teaches how to use Tone.js, a Web Audio framework, to build interactive music and audio applications in the browser. It covers synthesis, scheduling, sample playback, effects, routing, and best practices for precise timing and audio-visual synchronization. Use it to prototype instruments, sequencers, effects, and sound-driven interfaces quickly.

How this skill works

Tone.js provides high-level audio objects (synths, samplers, effects) that connect into an audio graph ending at the destination (speakers). It exposes a Transport and musical time notation for sample-accurate scheduling and parameter automation. You must start the AudioContext from a user interaction, pass the scheduler-provided time into callbacks, and use Tone.Draw for synchronized visuals.

When to use it

• Building browser synths, samplers, or polyphonic instruments
• Creating step sequencers, drum machines, or lightweight DAWs
• Adding music or real-time effects to games and interactive sites
• Scheduling precise musical events and tempo-based automation
• Implementing audio-visualizers synchronized to sound

Best practices

• Always call Tone.start() from a user gesture before playing audio
• Use the time parameter passed to callbacks for sample-accurate scheduling
• Chain or connect nodes to Tone.Destination and manage wet/dry for effects
• Design UI sounds to be short, mid-focused (300–3000Hz), and non-intrusive
• Provide user controls to mute, adjust volume, or disable sound types

Example use cases

• A browser-based synth that schedules arpeggios via Tone.Transport and Tone.Loop
• A polyphonic sampler instrument using Tone.Sampler with multi-sample mapping
• A step sequencer that triggers notes with Tone.Sequence and visual highlights via Tone.Draw
• An effects chain: synth → filter → delay → reverb with automated filter sweeps
• UI sound design: short, repeatable button and notification tones with adjustable volume