Introduction to Tone.js and Glitch

  • Tone.js is a JavaScript library for creating interactive audio applications.
  • Glitch.com is a platform for quick prototyping and hosting web apps.

Getting Started with Glitch

  • Visit Glitch.com and sign up or log in.
  • Fork a starter project with Tone.js preloaded.
  • Explore key project files: index.html, script.js, and style.css.
  • Look at glitch live updates and collaborative coding.

Basic Tone.js Example

Open script.js and add the following example to play a simple sound:

const synth = new Tone.Synth().toDestination();

document.getElementById("playButton").addEventListener("click", () => {
  synth.triggerAttackRelease("C4", "8n");
});

Update index.html to add a button element.

<button id="playButton">Play Sound</button>

Experimentation with Tone.js

  • Now try to modify the example to play different notes or durations.
  • Add multiple buttons for unique sound triggers.

Optional Tone.Loop

const loop = new Tone.Loop((time) => {
  synth.triggerAttackRelease("E4", "8n", time);
}, "4n").start(0);

Tone.Transport.start();

Wrap-Up and Next Steps

Extra Time?

Reverb

const reverb = new Tone.Reverb(0.5).toDestination();
synth.connect(reverb);