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

2.2.1 • Public • Published

React-hifi

styled with prettier Travis Coveralls Dev Dependencies

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

Package Sidebar

Install

npm i react-hifi

Weekly Downloads

28

Version

2.2.1

License

MIT

Unpacked Size

189 kB

Total Files

72

Last publish

Collaborators

  • chazzz