react-mixing

Cross-platform mixing engine for React

Stats

StarsIssuesVersionUpdatedCreatedSize
react-mixing
1130.1.0a year agoa year agoMinified + gzip package size for react-mixing in KB

Readme

react-mixing

 version  Downloads  jsDelivr  minified size  types includes  license

Installation

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.