react-tone

    1.1.1 • Public • Published

    Travis build status Codecov branch npm downloads MIT License

    gzip size size

    Maintainability PRs Welcome

    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.

    Install

    npm i react-tone

    DownloadsWeekly Downloads

    21

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    54.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar