skills.rest
plyght
plyghtCOMMUNITY
Explore all skills by this author →
Website𝕏@pliiightGitHub

tonejs

Automate browser-based audio application development with Tone.js.

2|Updated Jan 23, 2026
Search Tags:#synthesis#scheduling#browser#effects#web-audio#tonejs#sequencer
One-click install
npx skills add https://github.com/plyght/tonejs-skill --skill tonejs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tonejs
Source: https://github.com/plyght/tonejs-skill/tree/main
Command: npx skills add https://github.com/plyght/tonejs-skill --skill tonejs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates expert knowledge for building browser-based audio applications using Tone.js, enabling AI agents to reason about synthesis, scheduling, and audio routing in a browser environment.

Core Features & Use Cases

  • Synthesis and polyphony: create synthesizers and polyphonic instruments and route to the destination.
  • Sample playback and loading: load and play audio samples, and ensure Tone.loaded() before playback.
  • Sequencing and timing: build step sequencers, loops, and transport-based scheduling with sample-accurate timing.
  • Real-time effects and routing: chain effects, build complex audio graphs, and manage routing.
  • UI synchronization: coordinate visuals with audio using Tone.Draw for synchronized updates.

Quick Start

Practical steps to begin: import Tone, create a basic synth, connect to destination, and start audio after a user interaction. For example, initialize a synth, set an effect chain if needed, and trigger notes in response to an input.

Frequently Asked Questions about tonejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a browser-based synthesizer using Tone.js?▼

To build a browser-based synthesizer using Tone.js, initialize a synth, connect it to the audio destination, and trigger notes after a user interaction to comply with browser autoplay policies.

What is sample-accurate audio scheduling in web applications?▼

Sample-accurate audio scheduling uses transport-based timing and step sequencers to trigger notes precisely, avoiding UI thread jitter in web applications.

How do I chain real-time audio effects in a web audio graph?▼

To chain real-time audio effects in a web audio graph, connect nodes sequentially and route the final output to the destination to create complex audio processing pipelines.

Why do my audio samples not play immediately on load in Tone.js?▼

Audio samples do not play immediately because the browser buffers the files; you must ensure Tone.loaded() resolves before triggering playback to avoid silent gaps.

How do I synchronize UI visuals with audio timing in a browser?▼

To synchronize UI visuals with audio timing in a browser, schedule visual updates using Tone.Draw, ensuring DOM changes align accurately with the audio event schedule.

Do I need prior knowledge of Tone.js to use this automation?▼

Yes, this automation requires knowledge of Tone.js concepts including synthesis, scheduling, and audio routing to effectively manage interactive media projects.

Related Skills

Explore More Software Engineering Skills→
OpusGameLabsOpusGameLabs
307

game-audio

Orchestrate game audio by combining Strudel music loops with Web Audio API sound effects.

Official
Advanced
raphaelsalajaraphaelsalaja
507

create-sound

Generate audio sounds from natural language descriptions using @web-kits/audio.

Community
Advanced
mgd34msumgd34msu
4

lottie

Renders After Effects animations as JSON files for web and mobile via lottie-web.

Community
Intermediate
software-mansionsoftware-mansion
822

web-audio-api

Map React Native audio nodes to Web Audio API specifications with TypeScript interfaces.

Official
Advanced