Skip to content

Tone.js

A JavaScript framework for making interactive music and synths in the web browser.

Stars
14.9k
Forks
1.1k
Licence
MIT
Language
TypeScript
Last update
5 days ago
Type
Library

What it is

Tone.js is a framework built on the browser's Web Audio API for creating music in web pages. It offers DAW-style features such as a global transport for scheduling events, prebuilt synths and effects, and lower-level building blocks for custom instruments. The README describes it as aimed at both musicians and audio programmers.

  • Play a synth note on a button click using Tone.Synth
  • Build a looped drum or melody pattern with Tone.Loop and the Transport
  • Load and play audio files with Tone.Player or Tone.Sampler
  • Route a sound through effects such as Tone.Distortion or Tone.FeedbackDelay
  • Ramp the tempo over time with the Transport's bpm.rampTo

Great for

  • Developers adding interactive sound or music to a web page
  • Musicians who want to prototype synths or sequences in the browser
  • Students learning how Web Audio scheduling works
  • Creators building browser-based music toys or generative music experiments

Not ideal for

  • People who only want a standalone desktop music app, since this is a code library (reason: it requires writing JavaScript)
  • Projects that need audio processing outside the browser, since it targets the Web Audio API (reason: it is browser-based)
  • Complete beginners with no JavaScript experience, since the examples assume familiarity with code (reason: steeper learning curve)
Step-by-step guide: how to use Tone.jsInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js (only if using npm)

    Install the latest stable version

    npm install tone

    Install the next version

    npm install tone@next
  2. 2

    Run it

    • Install the package with npm install tone or add the unpkg script tag to an HTML page
    • Import it with import * as Tone from "tone"
    • Add a click listener to a button and call await Tone.start() inside it
    • Create a synth with new Tone.Synth().toDestination() and call triggerAttackRelease("C4", "8n")
  3. 3

    Get the most out of it

    • Use the Transport (Tone.getTransport()) with Tone.Loop to synchronize multiple sequences
    • Use the time value passed into scheduling callbacks rather than JavaScript timers for accurate timing
    • Wrap Tone.Synth in Tone.PolySynth when you need to play chords
    • Chain effects by connecting sources to effects such as Tone.Filter or Tone.Gain for complex routing
    • Use Tone.Sampler to build an instrument from a few sampled notes and let it fill in the gaps

Downloads

Strengths

  • Familiar DAW-style concepts like a global transport and time notation such as "8n"
  • Includes prebuilt synths, samplers and effects plus low-level building blocks
  • Installable via npm and usable directly in HTML via unpkg, with an API site and examples

Trade-offs

  • Browsers require a user action before audio can start, so code must wait for Tone.start()
  • Built-in synths are monophonic unless wrapped in Tone.PolySynth, which adds setup
  • Relies on the Web Audio API, so behavior depends on browser support

How it compares

ProjectStarsTypeLevelUpdatedBest for
Tone.js (this)14.9kLibraryintermediate5 days agoDevelopers adding interactive sound or music to a web page
howler.js25.4kLibrarybeginner12 months agoWeb developers adding sound effects or background music to a browser game or site
koel17.3kAppintermediate4 days agoPeople who want to listen to their own music library from a browser
AudioKit11.5kLibraryintermediate3 months agoSwift developers adding synthesizers, effects, or audio analysis to an iOS or macOS app
pear-desktop34kAppbeginner5 days agoPeople who want YouTube Music in a standalone desktop window
YesPlayMusic33.5kAppbeginner27 days agoExisting NetEase Cloud Music users who want a different player interface

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.