|
|
|
@ -33,7 +33,6 @@ class App extends React.Component {
|
|
|
|
|
bank: false,
|
|
|
|
|
volume: 100,
|
|
|
|
|
displayPanelText: "Drum Machine",
|
|
|
|
|
latestKeyPressed: undefined,
|
|
|
|
|
};
|
|
|
|
|
this.updateColors = this.updateColors.bind(this);
|
|
|
|
|
this.togglePower = this.togglePower.bind(this);
|
|
|
|
@ -41,24 +40,9 @@ class App extends React.Component {
|
|
|
|
|
this.handleVolumeChange = this.handleVolumeChange.bind(this);
|
|
|
|
|
this.toggleBank = this.toggleBank.bind(this);
|
|
|
|
|
this.displayDrumPadPress = this.displayDrumPadPress.bind(this);
|
|
|
|
|
this.handleKeyPresses = this.handleKeyPresses.bind(this);
|
|
|
|
|
this.updateColors();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleKeyPresses(event) {
|
|
|
|
|
this.setState({
|
|
|
|
|
latestKeyPressed: String(event.key).toUpperCase(),
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
document.addEventListener("keydown", this.handleKeyPresses, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
document.removeEventListener("keydown", this.handleKeyPresses, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
togglePower() {
|
|
|
|
|
this.setState((state) => ({
|
|
|
|
|
power: !state.power,
|
|
|
|
@ -70,7 +54,6 @@ class App extends React.Component {
|
|
|
|
|
displayDrumPadPress(note) {
|
|
|
|
|
this.setState({
|
|
|
|
|
displayPanelText: note,
|
|
|
|
|
latestKeyPressed: undefined,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -128,7 +111,6 @@ class App extends React.Component {
|
|
|
|
|
drumPadKeys.push(
|
|
|
|
|
<DrumPad
|
|
|
|
|
drumPadKey={drumPad.key}
|
|
|
|
|
isKeyPressed={this.state.latestKeyPressed === drumPad.key}
|
|
|
|
|
noteName={this.state.bank ? drumPad.altName : drumPad.name}
|
|
|
|
|
audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
|
|
|
|
|
power={this.state.power}
|
|
|
|
@ -207,20 +189,26 @@ class DrumPad extends React.Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {};
|
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
|
|
|
this.playSound = this.playSound.bind(this);
|
|
|
|
|
this.handleKeyPress = this.handleKeyPress.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleKeyPress(event) {
|
|
|
|
|
if (String(event.key).toUpperCase() === this.props.drumPadKey) {
|
|
|
|
|
this.playSound();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.audio = document.getElementById(this.props.drumPadKey);
|
|
|
|
|
document.addEventListener("keydown", this.handleKeyPress, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
|
if (this.props.isKeyPressed) {
|
|
|
|
|
this.handleClick();
|
|
|
|
|
}
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
document.removeEventListener("keydown", this.handleKeyPress, false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleClick() {
|
|
|
|
|
playSound() {
|
|
|
|
|
this.props.displayDrumPadPress(this.props.noteName);
|
|
|
|
|
this.audio.play();
|
|
|
|
|
}
|
|
|
|
@ -236,7 +224,7 @@ class DrumPad extends React.Component {
|
|
|
|
|
paddingBottom: "20%",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
}}
|
|
|
|
|
onClick={this.handleClick}
|
|
|
|
|
onClick={this.playSound}
|
|
|
|
|
>
|
|
|
|
|
{this.props.drumPadKey}
|
|
|
|
|
<audio
|
|
|
|
|