kevin-chau / treactr Goto Github PK

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

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

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

We will target NI Traktor Kontrol S4 and S5 first.

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?).

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

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