Build the most basic DJ App in Vanilla JS
Tags: javascript, beginners, music, webdev
Published: 2022-12-28 04:50:50

<a href="https://www.freepik.com/free-photo/closeup-dj-working-blue-light_10758954.htm#query=dj&position=0&from_view=keyword">Cover Image by wirestock</a> 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement))
that correspond to the two decks,
and for the crossfader we will use an input of type range 
([input type range on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range))
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6xo4m0k0xydzv3d5evr.png)

####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>
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymd5l7vm07312q867nsg.png)

###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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suicnrg8umzh3jaft9vg.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o21u8w61ym3q5by1m23.png)

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.