React-Music: Beatnuts - 'Watch Out Now' remix

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}>
            {/* this sample will loop every 2 bars (32 steps) */}
            <Sequencer resolution={32} bars={4}>
              <Sampler
                sample="/samples/kick.wav"
                steps={[
                  0, 16, 20,
                  32, 46.75, 48, 52,
                  64, 84,
                  96, 100, 102.75, 106.5, 111, 112, 116  
                ]}
              />
            </Sequencer>
            <Sequencer resolution={32} bars={1}>
              <Sampler
                sample="/samples/snare.wav"
                steps={[8, 24]}
              />
            </Sequencer>
            <Sequencer resolution={32} bars={2}>
              <Sampler
                sample="/samples/hihat.wav"
                steps={[
                  0, 4, 8, 12, 16, 20, 24, 28,
                  32, 36, 40, 44, 48, 52, 56, 60,
                ]}
                volume={80}
              />
            </Sequencer>
            <Sequencer resolution={32} bars={4}>
              <Synth
                type="square"
                volume={15}
                envelope={{
                  attack: 0.01,
                  sustain: 0.5,
                  decay: 0,
                  release: 0.1,
                }}
                steps={[
                  [0, 1.6, 'a#3'],
                  [2.75, 1, 'a#3'],
                  [6.5, 1, 'a#3'],
                  [10.25, 1, 'g#3'],
                  [12.5, 1, 'a#3'],

                  [32, 1.6, 'b#3'],
                  [34.75, 1, 'b#3'],
                  [38.5, 1, 'b#3'],
                  [42.25, 1, 'c#4'],
                  [44.5, 1, 'd#4'],

                  [64, 1.6, 'c#4'],
                  [66.5, 1, 'e#4'],
                  [70.5, 1, 'd#4'],
                  [74.25, 1, 'c#4'],
                  [76.5, 1, 'a#3'],

                  [96, 1.6, 'b#3'],
                  [98.5, 1, 'd#4'],
                  [102.5, 1, 'b#3'],
                  [106.25, 1, 'a#3'],
                  [108.5, 1, 'a3'],
                ]}
              />
            </Sequencer>
            <Sequencer resolution={32} bars={4}>
              <Synth
                type="sawtooth"
                gain={.25}
                envelope={{
                  attack: 0.01,
                  sustain: 0.5,
                  decay: 0,
                  release: 0.1,
                }}
                steps={[
                  [4, .75, ['e#4', 'c#4']],
                  [12, .75, ['e#4', 'c#4']],
                  [20, .75, ['e#4', 'c#4']],
                  [28, .75, ['e#4', 'c#4']],

                  [36, .75, ['f#4', 'b#3']],
                  [44, .75, ['f#4', 'b#3']],
                  [52, .75, ['f#4', 'b#3']],
                  [60, .75, ['g#4', 'b#3']],

                  [68, .75, ['e#4', 'c#4']],
                  [76, .75, ['e#4', 'c#4']],
                  [84, .75, ['e#4', 'c#4']],
                  [92, .75, ['e#4', 'c#4']],

                  [100, .75, ['a4', 'b#3']],
                  [108, .75, ['a4', 'b#3']],
                  [116, .75, ['a4', 'c#4']],
                  [124, 1, ['c#5', 'e#3', 'a#4', 'c#3', 'a#2']],
                ]}
              />
            </Sequencer>
            <Sequencer resolution={32} bars={4}>
              <Synth
                type="sine"
                gain={1}
                envelope={{
                  attack: 0.01,
                  sustain: 1,
                  decay: .2,
                  release: 0.2,
                }}
                steps={[
                  [0, 4, 'a#1'],
                  [14.25, .5, 'a#1'],
                  [16, 1, 'a#1'],
                  [20, 1.5, 'a#2'],

                  [48, 3.5, 'e#2'],

                  [68, 4, 'a#1'],
                  [78.25, .5, 'a#1'],
                  [80, 1, 'a#1'],
                  [84, 1.5, 'a#2'],

                  [96, 1, 'f2'],
                  [100, 1, 'f2'],
                  [120, 4, 'd#2'],
                ]}
              />
            </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>
    );
  }
}