Skip to main content

🍭react-mixing

version Downloads jsDelivr minified size types includes license

Installation​

npm i react-mixing

Quick started​

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

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 ref = React.useRef()

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

  return (
    <input onChange={e => set({fader: e.value})}/>
      <audio src="https://..."/>
      <synthed.Oscillator 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/>
)