React-audio-pad NPM

Audio Pad React Component

It's React Component to create music apps, drum machines, samplers like Akai MPC series or Maschine. In next stages I plan add React-Native component, options for users like volume or change sound support.

Installation

npm install react-audio-pad

Usage

import React, { Component } from 'react';
import AudioPad from "react-audio-pad"
import kick from './assets/KICK01.WAV';
import openHihat from './assets/OPENHIHAT01.WAV';
import snare from './assets/SNARE03.WAV';
import hihat from './assets/HIHAT01.WAV'
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Audio Pads for React</h1>
        </header>
        <AudioPad audioUrl={kick} keyCode="49" keyUp={false} color={"#d127d1"} volume={0.3}>
          Kick
        </AudioPad>
        <AudioPad audioUrl={snare} keyCode="50" keyUp={false} color={"#d127d1"} volume={1}>
          Snare
        </AudioPad>
        <AudioPad audioUrl={hihat} keyCode="51" keyUp={false} color={"#d127d1"} volume={1}>
          Hihat
        </AudioPad>
        <AudioPad audioUrl={openHihat} keyCode="52" keyUp={false} color={"#d127d1"} volume={1}>
          Open Hihat
        </AudioPad>
      </div>;
  }
}

export default App;