react-music: "Billie Jean"

demo.js

import React, { Component } from 'react';

import {
  Analyser,
  Song,
  Sequencer,
  Sampler,
  Synth,
} from '../src';

import Polysynth from './polysynth';
import Visualization from './visualization';

import './index.css';

export default class Demo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      playing: true,
    };

    this.handleAudioProcess = this.handleAudioProcess.bind(this);
    this.handlePlayToggle = this.handlePlayToggle.bind(this);
  }
  handleAudioProcess(analyser) {
    this.visualization.audioProcess(analyser);
  }
  handlePlayToggle() {
    this.setState({
      playing: !this.state.playing,
    });
  }
  render() {
    return (
      <div>
        <Song
          playing={this.state.playing}
          tempo={105}
        >
          <Analyser onAudioProcess={this.handleAudioProcess}>
            <Sequencer
              resolution={16}
              bars={1}
            >
              <Sampler
                sample="samples/kick.wav"
                steps={[0, 8]}
              />
              <Sampler
                sample="samples/snare.wav"
                steps={[4, 12]}
              />
              <Sampler
                sample="samples/hihat.wav"
                steps={[0, 2, 4, 6, 8, 10, 12, 14]}
              />
              {/* Bass line */}
              <Synth
                type="sine"
                steps={[
                  [0, .75, 'g2'],
                  [2, .75, 'd2'],
                  [4, .75, 'f2'],
                  [6, .75, 'g2'],
                  [8, .75, 'f2'],
                  [10, .75, 'd2'],
                  [12, .75, 'c2'],
                  [14, .75, 'd2']
                ]}
              />
            </Sequencer>
            
            <Sequencer
              resolution={16}
              bars={2}
            >
              <Synth
                type="triangle"
                steps={[
                  [0, .6, ['g4', 'a#4', 'd5']],
                  [6, .6, ['g4', 'a4', 'e5']],

                  [16, .6, ['g4', 'a#4', 'f5']],
                  [22, .6, ['g4', 'a4', 'e5']],
                ]}
              />
            </Sequencer>
          </Analyser>
        </Song>

        <Visualization ref={(c) => { this.visualization = c; }} />

        <button
          className="react-music-button"
          type="button"
          onClick={this.handlePlayToggle}
        >
          {this.state.playing ? 'Stop' : 'Play'}
        </button>
      </div>
    );
  }
}