Codebox Software

Try out your mixing skills with this online beatmatching game!

You will hear 2 drum loops playing at different speeds, which will probably sound awful. You need to adjust the speeds of the loops so that they match, and then synchronise the beats so that they play at the same time. All of this will be easier if you use headphones - one drum loop will play in each ear.

To change the playback speed of a drum loop use the vertical sliders to the right of each turntable, these allow you to increase or decrease the speed by up to 10%. The game will only give you drum loops that can be matched using this speed range. To make fine adjustments to the speed, click above or below the slider to move it slightly in that direction.

There is a volume control below each slider (drag it up and down to change volume). You can create a better mix by adjusting how loudly each track is playing, so that one doesn't drown out the other. It can sometimes be helpful to completely mute each of the loops in turn so that you can hear them in isolation before trying to mix them together.

Each turntable also has a Start/Stop button in the lower left corner, as well as a Power button just above it. The Start/Stop button quickly (but not instantly) starts/stops the turntable. Pressing the Power button while a loop is playing allows the loop to slow down and stop gradually, simulating the effect of friction. You can use both these controls for different effects when mixing.

The turntables have patterns of circular dots around the circumference, similar to those found on good quality record decks. On a physical record deck the red light built into the power button is actually a strobe, and the dots are positioned so that when the deck is rotating at certain predefined speeds, the dots in one or other of the rows will appear to be stationary. This allows the DJ to check for any miscalibration of the pitch (speed) control. No such checks are needed for these virtual turntables, however the dots do provide a visual indication of the exact speed of the turntable and so may still be useful. One of the four rows of dots will appear static at speeds of +6.4%, +3.3%, 0% and -3.3%. The positions of the dots are calculated based on the refresh rate of the screen, so the spacing between them may differ between devices.

The turntables can also be manipulated using your mouse (or fingers, on a touch screen). Try some scratching or backspins and see how it sounds!

The game itself has 2 modes:

Freestyle Mode

If you haven't done any mixing before start here. In Freestyle Mode you can just play around with the turntables, try (and probably fail) to get a nice mix going, and then use the Auto-Match All button to hear what the loops sound like when mixed together perfectly. You also have the option to just auto-match the speeds of the loops without synchronising the beats, or to auto-synchronise the beats without changing the speeds (of course if you do the latter the beats will go out of sync again very quickly!).

Here is a video showing Freestyle mode. The 2 drum loops start off out-of-sync and are then automatically matched. Notice how the speed controls and the BPM values change when the 'All' button is pressed:

Training Mode

Training Mode is intended for anyone who is more serious about improving their mixing skills. Initially the Auto-Match buttons and BPM displays are hidden. Mix the drum loops together by ear as best you can, and then press the 'Analyse' button to see how you did. Various statistics will be displayed, including the BPM of each loop, the difference between the BPMs, and the beat period.

Here is a video showing Training Mode after a mix has been attempted and the Analyse button pressed. Below the various stats is a 'ladder' display showing the beats from the 2 turntables and the mismatch between them. The red sections of the ladder show the gaps between the beats, so in general the less red you see here the better the mix was. In the video the 2 loops start off completely out-of-sync, as can be seen from the BPM Difference and Error values, and from all the red on the ladder display. Once the pitch is auto-matched the BPM Difference and Error values drop to zero, however there is still a lot of red on the ladder display (the exact amount is shown by the 'Total Mismatch' score above the ladder) because the beats are still out of sync. Clicking the Auto-Match Position button brings the beats into sync, and the Total Mismatch score drops to zero indicating a perfect mix.

The source code for this game has been released under the MIT Open Source Licence and is available on GitHub.