Napolean Paced Mischeviously

    react-mixing
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

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

    Install

    npm i react-mixing

    DownloadsWeekly Downloads

    2

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    91.3 kB

    Total Files

    47

    Last publish

    Collaborators

    • tsei