react-audio-pad
v0.1.4
Published
React Component to build music apps with pads like Akai MPC or Maschine
Downloads
20
Maintainers
Readme
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;