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) |