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