react-audio-pad

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;

API

Props

name	type	default	description
audioUrl	string		import string from Your assets - I have some issues when try pass just string - look at example
keyCode	string		string with number of keycode (https://css-tricks.com/snippets/javascript/javascript-keycodes/)
keyUp	boolean	false	if true, sound will cut when You up key
color	string		color pad shadow when pressed
volume	number	1.0	volume of your sound
width	number	100	width of pad
height	number	100	height of pad
margin	number	20	components margin (not only pad part - paragraph too)