React-hifi


A composable Abstraction for AudioContext API with a easy to use react API.

check the documentation

Installation

``bash
npm i react-hifi


or


yarn add react-hifi
`

Example

`tsx
import React from 'react';
import { render } from 'react-dom';
import {
Sound,
Volume,
Stereo,
BiQuadFilter,
} from 'react-hifi';


render(





)

`

Plugins

A plugin is simply an object wich match the interface below passed to pluginFactory.
This library give you access to a few basic plugin :
- Volume
- Stereo
- BiQuadFilter
- Equalizer (basicaly an array of BiQuadFilter)
- AnalyserByFrequency (visualisation)
- Oscilator (visualisation)

Plugins can do everything allowed by the html5 audio api.

`ts
interface Plugin {
createNode(audioContext: AudioContext, props: Props): Node;
updateNode?(node: Node, props: Props): void;
shouldNotUpdate?(prevProps: MyNodeProps, nextProps: MyNodeProps): boolean;
}
`

lets rewrite the volume plugin

`tsx
import React from 'react';
import { render } from 'react-dom';
import Sound, { pluginFactory } from 'react-hifi';

interface MyNodeProps {
value: number;
}

const myCustomPlugin: Plugin = {
createNode(ctx: AudioContext, props: MyNodeProps) {
return ctx.createGain();
},
updateNode(node, props: MyNodeProps) {
node.gain.value = props.value;
}
shouldNotUpdate(prevProps: MyNodeProps, nextProps: MyNodeProps) {
return prevProps.value === nextProps.value;
},
}

const MyNode = pluginFactory(myCustomPlugin);

render(



)
``