Build the most basic DJ App in Vanilla JS

Cover Image by wirestock on Freepik.

In a typical DJ setup there are two decks and a mixer.

On the mixer there is a horizontal fader called Crossfader which is used to blend the volume of the two decks (crossfade) so the DJ can mix the tracks.

The way it works is that when the fader is in the middle, both decks are on the same level, moving it to the right it will attenuate the volume of the left deck, moving it to the left will attenuate the volume of the right deck.

To simulate that functionality we will use two HTML audio elements (HTMLAudioElement on MDN)
that correspond to the two decks,
and for the crossfader we will use an input of type range
(input type range on MDN)
which looks and behaves like a fader and of which we will adapt its functionality in JavaScript to make it work like a crossfader.

The HTML

In our HTML, after the boilerplate code, we create two audio elements with the id's of "deck1" and "deck2" which will be the left and right deck respectively.

We also need to specify the controls attribute in order to display the graphical user interface (play - pause buttons etc.) of the audio element.

In the same folder of the project add at least two audio files, so you can have something to listen to for testing as we go.

Assign the src attribute of each of the audio players to the path to one of your audio files.

For demo purposes i will refer to the imaginary filenames 'track1' and 'track2' as the names of the audio files.

Important

Keep in mind that the maximum value that we can set the volume of an audio element is 1.
This comes from the specification and we will need this information for later use.

Then we create an input with an id of crossfader and of type range that resembles our crossfader.

<input type="range" id="crossfader">

A range input accepts four basic attributes, namely min, max, step and value.

Although these attribute names explain themselves let me be clear ...
the min attribute sets the minimum value of the range of the input,
the max the maximum value of the range,
the step sets the amount of increment / decrement for each step of the fader,
and the value attribute sets the default value for it.

We will set the minimum to 0,
the maximum to 1 (which is the maximum allowed value for the volume of the audio players),
the step to 0.01 so we can have a greater resolution on each step of the fader (and avoid jumps on each step)
and the value attribute to .5, which means equal volume for both audio players.

<input type="range" id="crossfader" min="0" max="1" step="0.01" value=".5">

Finally, add a script tag that links to your javascript file.
I will give it the name of main.js.

<script src="main.js"></script>

The JavaScript

In the javascript file let 's first access all the elements that we need, that is, the two audio elements and the range input.

Then, we immediately initialize the volume property of each audio player to the current value of the crossfader(.5), so that both players will have the same volume.

Now, we need to assign an event listener to our crossfader element.

It will 'listen' for the input event which is fired every time we move the crossfader by the value of its step attribute to the left or to the right.

All the magic happens inside the body of the callback function that we will provide.
Consider the following snippet:

crossfader.addEventListener('input', function() {
    deck1.volume = this.max - this.value; // This line is actually turning the range input into a crossfader //
    deck2.volume = this.value;
});

(in context, the keyword this, refers to the crossfader itself).

So, in the first line of our callback function we set the volume of deck1 to
crossfader.max (which is 1, which is the maximum allowed volume for the audio element)
minus the
crossfader.value which is determined by the crossfader head's current position.

That means that when the fader is on the right end,
its value is at its maximum
which is 1 (set by its max attribute in the HTML code),
so the volume of the deck1 will be:
this.max - this.value = 1 - 1 = 0,
in other words moving the fader to the right decreases the volume of the deck1.

At the same time it behaves normally for the deck2 (second line of the callback function).
It sets the volume of deck2 to its current value, so moving it to the right increases its volume.

We're almost there, so far the javascript code should be working and looking like this:

You can now press the play button on both audio players and mix the tracks with the crossfader.

I hope that you enjoyed it thus far.
If that is the case i will continue next time by adding a playlist of tracks that we will be able to load dynamically to our audio players in javascript and also add some basic CSS styling.
Thank you.