Subscribe

Public Solving: Creating a song with JavaScript

• + 14 devs liked it

✍️

How to create a metronome in JavaScript and play a song generated by JavaScript

31 Dec, 2021 · 4 min read

Today’s puzzle is cool, I enjoyed every step of it, and the outcome is super fun!

The elves have provided us with a piece of paper with letters. They say it should be some music.

It’s up to us to find and create sound waves for each letter and see what song they send to us.

If you can’t wait, try out the outcome of today’s puzzle on this CodePen. (Hint: turn up your volume)

See the Pen Untitled by Chris Bongers (@rebelchris) on CodePen.

This challenge has multiple parts to it.

In the first part, we have to build a metronome function. This function will execute a function every x time.

I plan to use an interval to solve this.

This would work best as we have a separate function that should stop whatever happens.

The second part consists of finding the right frequency for a note, for which we will use a simple lookup table.

And then, we should play the melody based on a string. I’ll split the string into pieces and call our metronome function to play and remove the letter it played from the string.

We will play the whole song and then stop the metronome function.

Alright, let’s get to it.

Building a JavaScript music player permalink

As mentioned, we’ll have to work on the metronome function first.

Let’s start with the `stopMetronome` function. This function should erase the current interval that’s looping.

``````export const stopMetronome = () => {
clearInterval(metronomeInterval);
};``````

As for the start function, we should start by clearing any existing intervals.

``clearInterval(metronomeInterval);``

Then we need to convert the `bpm` property into a millisecond interval. For this, we can use the following formula.

``const interval = (60 / bpm) * 1000;``

And then we can start our interval. Each loop should execute the function that’s being passed to it.

``metronomeInterval = setInterval(() => fn(), interval);``

And that’s it. We created a metronome function.

We then have to make a lookup table to find the frequencies for each letter. I’ve decided to make a simple lookup table.

``````const noteToFrequency = {
C: 261.6,
D: 293.7,
E: 329.6,
F: 349.2,
G: 392.0,
A: 440.0,
B: 493.9,
};``````

And as for the function that should get the frequency for a letter, it’s as easy as this:

``export const getFrequency = (note) => noteToFrequency[note];``

Then we can start on the `stopMelody` function. This should call the `stopMetronome` function.

``export const stopMelody = () => stopMetronome();``

Now on to the exciting part, playing the melody. The first thing we need to do is split the string into an array for each character.

``const notes = input.split('');``

Then we can call our metronome function and pass the bpm and a new function we’ll call `play`.

``startMetronome(bpm, () => play(notes));``

This play function is where we will play the audio and modify the `notes` array.

We evaluate if the array is empty because then we have to stop playing.

``if (!notes.length) stopMelody();``

Then we must retrieve the first letter in the array, which we’ll be playing.

``const note = notes[0];``

This could be a letter or a space. Only if it’s a letter should we play it.

``````if (note !== ' ') {
playNote(getFrequency(note));
}``````

And then, we can remove the first element from this array.

``notes.shift();``

That’s it! We build our custom music player in JavaScript.

Let’s test it to see if we succeeded.

I enjoyed doing this assignment and would love to hear what you would do differently.

Tweet this tip
• + 14 devs liked it

Public Solving: Find the missing presents

3 Jan, 2022 · 2 min read

Public Solving: Caesar decipher in JavaScript

2 Jan, 2022 · 3 min read

Join 2099 devs and subscribe to my newsletter

• 1000 articles written
• 2099 devs subscribed
• 529992 words written