Tone.Transport.start vs Tone.start in Tone.js

In Tone.js, a popular Web Audio framework, Tone.start() and Tone.Transport.start() serve two entirely different purposes despite their similar names. While Tone.start() is used to initialize the global web audio context in compliance with browser security policies, Tone.Transport.start() controls the timeline-based playback of scheduled musical events like loops, synths, and sequences. Understanding this distinction is crucial for preventing silent audio issues and managing musical time in your web applications.

Tone.start()

Tone.start() is a function that initializes and resumes the underlying browser Web Audio Context (AudioContext).

Modern web browsers block audio from playing automatically to prevent intrusive ads and unwanted noise. To play any sound, a user must interact with the page (such as clicking a button or tapping the screen). Tone.start() must be called inside this user-initiated event listener to tell the browser that the user has explicitly consented to audio playback.

• Purpose: Enables the Web Audio API and wakes up the audio context.
• When to use: Once, at the very beginning of user interaction (e.g., on a “Start” or “Play” button click).
• Return value: It returns a Promise that resolves when the audio context is successfully running.

Example Usage:

const button = document.querySelector('button');

button.addEventListener('click', async () => {
    // This unlocks the browser's audio context
    await Tone.start();
    console.log('Audio context is active');
    
    // Now you can play sounds
    const synth = new Tone.Synth().toDestination();
    synth.triggerAttackRelease("C4", "8n");
});

Tone.Transport.start()

Tone.Transport.start() controls the Tone.Transport object, which represents the master musical timeline of your Tone.js application.

The Transport is responsible for keeping track of time in beats, measures, and bars. It allows you to schedule events, sync loops, and run step sequencers at a specific tempo (BPM). Calling Tone.Transport.start() starts this internal clock, causing any scheduled musical events to begin playing in sync.

• Purpose: Starts the master musical clock/timeline.
• When to use: Whenever you want to start playing back scheduled events, loops, or sequences.
• Prerequisite: You must have already started the audio context using Tone.start() before you can hear anything scheduled on the Transport.

Example Usage:

// Schedule a repeating loop
const synth = new Tone.Synth().toDestination();
const loop = new Tone.Loop(time => {
    synth.triggerAttackRelease("C4", "8n", time);
}, "4n").start(0);

// Start the timeline clock so the loop plays
Tone.Transport.start();

Key Differences Summary