react-looper
v0.2.8
Web Audio API based Looper component for React
-
- Connect your own
AudioContext(or use the default one 🤖)
- Connect your own
-
- Built-in tweakable oscillator as metronome (tick, tick, tick...💣)
-
- Loop your audio file each X bars (just provide the arrayBuffer 👍)
Installation and usage
yarn add react-looper
Metronome
import Looper from "react-looper"
<Looper playing />
99 BPM
<Looper bpm={99} playing />
Play each 4 bars
<Looper bpm={99} playEach={4} playing />
Props
| Name | Type | Default | Description |
|---|---|---|---|
audioContext |
AudioContext |
new AudioContext() |
AudioContext object |
bpm |
number |
120 |
sets the tempo of your loop |
looping |
boolean |
false |
starts or stops your loop |
source |
ArrayBuffer |
undefined |
audio file to play each iteration |
onIteration |
function |
() => {} |
function to invoke each iteration |
playEach |
number |
undefined |
play sound each number of iterations |
Additional props
oscillator
This object can be provided in order to configure Looper's oscillator and its duration (ms).
| Name | Type | Default | Description |
|---|---|---|---|
detune |
number |
0 |
OscillatorNode.detune |
duration |
number |
0 |
duration of the tone in milliseconds |
frequency |
number |
false |
OscillatorNode.frequency |
type |
string |
"sine" |
OscillatorNode.type |
const oscillatorConfig = {
duration: 0.05,
detune: 1,
frequency: 555,
type: "square",
}
<Looper playing oscillator={oscillatorConfig} />
License
MIT Licensed. Copyright (c) Peter Sherhsov 2018.
