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/>
)