react-mixing

Installation

npm install react-mixing

Quick started

git clone https://github.com/tseijp/react-mixing
cd react-mixing
cd examples
yarn i
yarn start

• open browser and visit localhost:3000
• Now you can go to our demo, and try its usage.

Documentation and Examples

More info about the project can be found here.

Examples and tutorials can be found here.

What does it look like?

import React from 'react'
import {synthed, useMixing} from 'react-mixing'

export function App () {
  const from = React.useRef()

  const [mix, set] = useMixing({from, high: .6, middle: .3, low: 0}, [])

  return (
    <input onChange={e => set({fader: e.value})}/>
      <audio ref={from} src="..."/>
      <synthed.Filter to={mix} />
    </input>
  )
}

Recipes

Components

const [toggle, set] = useState(1)
const handle = () => set(p => Number(!p))
render (
  <synthed.Oscillator>
    <Mixing immediate={toggle}>
      {value =>
        <a.button onClick={handle}>
          {value}
        </a.button>
      }
    </Mixing>
  </synthed.Oscillator>
)

useMixing

import {synthed, useMixing} from 'react-mixing'

const [mix, set] = useMixing({high: .6, middle: .3, low: 0}, [])

render (
  <synthed.Oscillator to={mix}>
    <input onChange={e => set({fader: e.value})}/>
  </synthed.Oscillator>
)

useMixings

import {synthed, useMixings} from 'react-mixing'
const [mixs, set] = useMixings(2, i => ({high: i*.6, mid: i*.3, low: i}))

render ({mixs.map(mix =>
  <synthed.Oscillator from={mix}>
)})

@react-mixing/node

import s from 'react-mixing'

const [toggle, set] = useState(false)

render (
  <button onClick={() => set(p => !p)}>
    {toggle? 'Stop': 'Start'}
    <s.Oscillator immediate>
      <s.Filter row={0} mid={.5}/>
        <s.Gain value={toggle} destination>
      </s.Filter>
    </s.Oscillator>
  </button>
)

@react-mixing/todo

with React Spring

render (
  <synthed.Oscillator>
    <Mixing>
      {value =>
        <animated.div>{value}</animated.div>
      }
    </Mixing>
  </synthed.Oscillator>
)

MixingContext && useMixingContext

function Element (props) {
  const [{value}] = useMixingContext()
  return (
    <animated.div>{value}</animated.div>
  )
}

render (
  <synthed.Oscillator>
    <MixingContext>
      {[...Array(100).keys()].map(key =>
        <Element key={key}/>
      )}
    </MixingContext>
  <synthed.Oscillator>
)

Mixing from Web Speech API

const Input = synthed.Speech`HELLO WORLD`

render (
  <Input lang='ja'>
    {({value}) =>
      <animated.div>{value}</animated.div>
    }
  </Input>
)

SynthWorklet

const Noise = synthed(props => ({process (inputs, outputs, parameters) {
    const output = outputs[0];
    for (let channel = 0; channel < output.length; ++channel) {
        const outputChannel = output[channel];
        for (let i = 0; i < outputChannel.length; ++i)
            outputChannel[i] = 2 * (Math.random() - 0.5)
    }
    return true;
}}))

render (
  <Noise destination/>
)