react-frequency

A simple React component and hook which emits a frequency generated thanks to the AudioContext API of JavaScript !

Live Demo

Installation

npm

npm install react-frequency

yarn

yarn add react-frequency

Usage

Hook

import React from 'react';
import { useFrequency } from 'react-frequency';

const App = () => {
  const { toggle, start, stop, playing } = useFrequency({
    hz: 174,
    type: "center",
    gain: 1,
    oscillator: "sine"
  })

  return (
    <div>
      <h1>playing: { playing ? 'true' : 'false' }</h1>
    
      <button onClick={toggle}>toggle</button>
      
      <button onClick={start}>start</button>
      <button onClick={stop}>stop</button>
    </div>
  )
};

The useFrequency hook return 3 functions and 1 boolean :

functions

• toggle: start and stop the frequency
• start: start the frequency
• stop: stop the frequency

boolean

• playing: reading state of the frequency

Component

import React from 'react';
import { Frequency } from 'react-frequency';

const App = () => (
  <Frequency
    hz={174}
    type="center"
    gain={1}
    oscillator="sine"
  />
);

The component does not return any elements and emits automatically the frequency.

Props

The only props required is hz.

| Name | Default | Description | | ------------- |:-------------:| -----:| | hz | requirednumber | The frequency corresponds to the number of vibrations per second.The human ear hears values ranging from 20Hz to 20,000Hz | | type | not required"center" | The type defines from which side the sound will come out.Values can be "left", "center" or "right" | | gain | not required1 | The gain defines the ability to increase the strength of a signal.Value is float between 0 and 1 | | oscillator | not required"sine" | It specifies what shape of waveform the oscillator will output.Values can be "sine", "square", "sawtooth" or "triangle" |

A complete exemple is available in the Live Demo