WebDj

WebDj is a react web application for mixing songs. Try out the demo!

Features

• Play two audio files simultaneously

• Change the tracks by dragging an audio file on a deck or by using the "Select Song" Button

• Control volume using the vertical slider of a track or by using the crossfader

• 3 band equalizer (high shelf, peaking, low shelf)

• Waveform visualization with click handler to jump to selected position

• Progress bar that visualizes the play position

• Play tracks (with same bpm) synchronized

• Beat Jump 1/4/8/16/32 beats forward and backward

• Loop 1/4/8/16/32 beats

Dependencies

• React
• Web Audio API
• web-audio-beat-detector
• Canvas API
• Ant Design
• Styled Components
• React Rotary Knob

Getting started

Prerequisites

• npm - dependency manager

Installation

• Clone the repository

  git clone [email protected]:janis-schanbacher/webdj.git

• Install all dependencies from within the repository

  cd webdj
  npm install

Usage

• Run the app in development mode

  npm start

• Open http://localhost:3000 in the browser.
• Build minified, optimized build in production mode (more information see deployment)

  npm build
  

Setup editor

EditorConfig

Webdj is using EditorConfig to ensure all files have the same style and encoding through different editors.

A plugin might be required for your preferred editor to use these settings EditorConfig.

Linting

• Install linter extension to your editor of choice:
  • VSCode: ESLint
  • Vim: ALE (Asynchronous Lint Engine)
• Lint all JavaScript files:

  yarn lint