README
React-hifi
A composable Abstraction for AudioContext API with a easy to use react API.
check the documentation
Installation
npm i react-hifi
# or
yarn add react-hifi
Example
import React from 'react';
import { render } from 'react-dom';
import {
Sound,
Volume,
Stereo,
BiQuadFilter,
} from 'react-hifi';
render(
<Sound url="http://foo/bar.mp3">
<Volume value={50} />
<Stereo value={0.5} />
<BiQuadFilter value={5} type="peaking" />
</Sound>
)
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.
interface Plugin<Props, Node = AudioNode | AudioNode[]> {
createNode(audioContext: AudioContext, props: Props): Node;
updateNode?(node: Node, props: Props): void;
shouldNotUpdate?(prevProps: MyNodeProps, nextProps: MyNodeProps): boolean;
}
lets rewrite the volume plugin
import React from 'react';
import { render } from 'react-dom';
import Sound, { pluginFactory } from 'react-hifi';
interface MyNodeProps {
value: number;
}
const myCustomPlugin: Plugin<MyNodeProps, GainNode> = {
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<MyNodeProps, GainNode>(myCustomPlugin);
render(
<Sound url="http://foo/bar.mp3">
<MyNode value={0.5} />
</Sound>
)