DEV Community

Cover image for Creating a remix using Tone.js
Coding Fatale
Coding Fatale

Posted on • Edited on

6

Creating a remix using Tone.js

I took a break from making music for a few years and wanted to return to composing music. This is a great time to return to my passion after a long hiatus. In the first step of creating music with code. I have decided to jump in and learn Tone.js.

What is Tone.js

Tone.js is a web audio framework used to create music in a browser. It is flexible and can be used to create various music web applications. Tone.js documentation has examples, documentation and demos on their GitHub page. The Chrome Music Lab uses Tone.js.

Creating Mary had a little lamb

To start off we have to create a javascript file and create a synth. We have the exported Tone object and for the instrument, MembraneSynth is used to make the sounds with.

const synth = new Tone.MembraneSynth().toDestination();
Enter fullscreen mode Exit fullscreen mode

We have to add the notes to Mary had a little lamb. This is done by creating an array for the notes. Use null to create a rest or a pause.

const notes = [
 "A3",
 "G2",
 "F1",
 "G2", 
 "A3",
 "A3", 
 "A3", 
 null,
 "G2",
 "G2",
 "G2",
 null,
 "A3",
 "C5",
 "C5",
 null
];
Enter fullscreen mode Exit fullscreen mode

We have to set the bpm. In this example I set it to 130.

Tone.Transport.bpm.value = 130
Enter fullscreen mode Exit fullscreen mode

Create a sequence with the synth and notes. For the last part we have to setup starting the audio so it can play in the browser.

const seq = new Tone.Sequence((time, note) => {
    synth.triggerAttackRelease(note, 1.0 , time);
  },
  notes,
  "4n"
);

seq.start();
Tone.Transport.start();
Enter fullscreen mode Exit fullscreen mode

In the browser the audio will loop a segment of Mary had a little lamb. This was my first experiment with Tone.js. The framework can be used to create more complex web applications.

Tone.js resources for beginners

Tone.js page
Tone.js tutorial

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay