react-tone 🎶

A React component that plays a tone from an oscillator.

Getting started

npm install --save react-tone

Why?

react-tone is a component that uses a OscillatorNode to play a sound at a given frequency and length.

You can pass react-tone an instance of AudioContext. This solves an issue playing sounds on iOS devices. On iOS devices, a sound is muted until it's created from an interaction event. Using an AudioContext to play a dummy buffer fixes this. See this issue for more information.

API

Props	Description	Default
play	(Boolean) Play a tone	false
length	(Number) How long the tone should play (in seconds)	0.05
frequency	(Number) The frequency of the tone	400
volume	(Number) The volume of the tone (0 being silent, and 1 being the loudest)	1
audioContext	(Object) An instance of AudioContext	new AudioContext()
onStop	(Function) Callback function to be called when the tone has finished playing	() => {}

import React, { Component } from "react";
import Tone from "react-tone";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isTonePlaying: false
    };

    this.audioContext = undefined;
    this.iosAudioContextUnlocked = false;
  }

  componentDidMount() {
    this.audioContext = new AudioContext();
  }

  handleClick = () => {
    if (!this.iosAudioContextUnlocked) this.playEmptyBuffer();

    this.setState({ isTonePlaying: true });
  }

  playEmptyBuffer = () => {
    // start an empty buffer with an instance of AudioContext
    const buffer = this.audioContext.createBuffer(1, 1, 22050);
    const node = this.audioContext.createBufferSource();
    node.buffer = buffer;
    node.start(0);
    this.iosAudioContextUnlocked = true;
  }

  handleToneStop = () => {
    this.setState({ isTonePlaying: false });
  }

  render() {
    // Pass the same instance of AudioContext that played an empty buffer to <Tone />
    return (
      <div>
        <button onClick={this.handleClick}>Play Tone</button>
        <Tone
          audioContext={this.audioContext}
          play={this.state.isTonePlaying}
          frequency={500}
          volume={0.8}
          length={2}
          onStop={this.handleToneStop}
        />
      </div>
    );
  }
}

Demo

See this CodeSandbox demo.