tomleslieli / BeatBox

BeatBox

Demo

BeatBox

Background and Technologies

BeatBox is a free, open source four-channel DJ application. Suited for both beginners as well as advanced DJs.

BeatBox pairs an easy-to-use / minimalistic UI with industry-standard features such as:

• Four Unique Players w/ File Upload
• Volume Controls
• Speed Controls
• Hot Cues
• Loops

Technologies

• JavaScript
• HTML5
• CSS3

APIs

BeatBox utilizes third-party components such as Wavesurfer.js and Font-Awesome stylesheets. More information on these tools at the following links:

https://wavesurfer-js.org/

https://fontawesome.com/

Functionality and MVPs

• Users are able to load up to four tracks for simultaneous playback.
• Sliders are provided for track volume + speed controls.
• 'Mute' button cuts all audio output from a given track.
• 'Reset Speed' button sets track speed back to the original playback speed.
• Pressing the 'IN' and 'OUT' buttons creates a loop - the track will continue to loop until the loop is cleared.
• Users are able to set up to two hot cues, which they are able to skip to at any point during the track.

Upcoming updates / integrations

• Spotify Playlist Integration
• BPM Detection
• Audio Sync
• Key Bindings
• Crossfaders
• Biquad Filters
• Sample Libraries

User Guide & Tutorial

Load Tracks

Click 'Load' to load a track & 'Clear' to clear the track. You may load up to four tracks at a time.

Loops

Click 'In' to set the in-point of a loop. Click 'Out' to set the output of a loop. The loop will automatically start when both in & out-points are set. Click 'Clear' to clear the loop.

Hot Cues

Click '1' or '2' to set a hot cue. Once a hot cue is set, you may click on the hot cue to jump to this position. Click on the 'Reset' icon beneath a hot cue to clear the hot cue.