kevin-chau / treactr

A Traktor clone in React

TReactr

A Traktor clone in React

TReactr is a javascript digital DJ mixing application built for the modern web, based on the legendary UI from Native Instruments' Traktor.

Features:

• Stream music from Youtube or Soundcloud
• Apply EQ's and filter to html5 audio sources

TReactr is brought to you by:

Node.js, Express, GraphQL, React, Babel, ESLint, PostCSS, Webpack, and Browsersync.

Install:

This project uses yarn for managing packages, running build scripts, and starting the development server. If you don't already have yarn you can install it with:

npm install -g yarn

To install TReactr, use:

yarn

This is equivalent to yarn install or npm install.

Run:

To start a dev server and launch TReactr in your browser, use:

yarn start

This is equivalent to npm start.

For a full list of scripts that can be ran with yarn or npm, see package.json.

Contributing:

The easiest way to start contributing is to check out the deployment on Heroku and open up an issue if you have problems with it.

If you want to help with development, there's a to-do list of small features that need to be implemented in the Wiki.

If you like thinking about the bigger picture, we have a build/release plan on the Wiki as well. TReactr will be officially released sometime in late 2017.

treactr's Issues

App crashes on heroku. live preview broken.

Bi-Directional Cross Fader

The bottom crossfader should be highlighted when you are on the left or right side of the center point.

Unit Testing and Continuous Integration

It's time to start unit testing our code and getting a CI runner up.

For Unit Testing, we plan to use Jest:
https://facebook.github.io/jest/docs/tutorial-react.html

For CI, we plan to use Travis:
https://travis-ci.org/facebook/react

Both of these have good tutorials and documentation for setting up with React, so it should be a piece of cake...

Private Biquad Filters for each Deck Component

Each Deck component should have its own instances of the Biquad Filters (High, Mid, Low).

Currently, the biquad filters are declared globally outside of the Component definition, so all instances of a Deck share the same biquad filter. This means that if you move the EQ knobs on one deck it will change the cutoff frequency of the EQs on the other deck.

The reason why biquad filters are global variables at the moment is because they need to be instantiated in componentDidMount (which is called after the first call to render() produces an <audio> tag). The values of the filters parameters are actually updated in componentDidUpdate.

There should be a way to not have global biquad filters and instead make them private variables defined within a component, perhaps through props or state (or context?).

Change Youtube Volume of Decks Independently

Support USB-MIDI Controllers

We will target NI Traktor Kontrol S4 and S5 first.

Manipulate Youtube Audio

Second Heroku Deployment for Development

We currently use Yarn + a deployment script to push to the treactr live app on heroku. We need a second deployment script.

Get Soundcloud Audio

Creating Audio Source Node from React-Player Audio Tag.

In Deck.js:render(), React-Player creates an audio tag () when given a soundcloud url.

The function componentDidMount() just above it will run right after the component is rendered, so we should be able to create an audio source node from it using the Web Audio API.

If you uncomment line 27:

    var source = audioCtx.createMediaElementSource(myAudio);

and run Treactr, we run in to the following error mounting the audio source:

Error: Failed to execute 'createMediaElementSource' on 'BaseAudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode

NOTE: This error doesn't show up in the console and instead shows up in the browser tab.

I've checked the react-player source code and I did not see any calls to the Web Audio API so I am wondering why it would think that the audio tag has already been associated with another source node.

How do we go about debugging this issue?

https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource

Render Waveforms for HTML5 Audio

https://www.npmjs.com/package/react-wavesurfer