|
|
|
@ -210,28 +210,26 @@ class DrumPad extends React.Component {
|
|
|
|
|
this.handleClick = this.handleClick.bind(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
this.audio = document.getElementById(this.props.drumPadKey);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
|
if (this.props.isKeyPressed) {
|
|
|
|
|
this.handleClick();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// TO-DO: refactor by handling props change here
|
|
|
|
|
handleClick() {
|
|
|
|
|
this.props.displayDrumPadPress(this.props.noteName);
|
|
|
|
|
this.audio = new Audio(this.props.audioSrc);
|
|
|
|
|
this.audio.currentTime = 0;
|
|
|
|
|
this.audio.volume = this.props.volume / 100;
|
|
|
|
|
if (this.props.power) {
|
|
|
|
|
this.audio.play();
|
|
|
|
|
}
|
|
|
|
|
this.audio.play();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="col-4 p-1">
|
|
|
|
|
<button
|
|
|
|
|
id={this.props.drumPadKey}
|
|
|
|
|
id={`${this.props.drumPadKey}-button`}
|
|
|
|
|
className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
|
|
|
|
|
style={{
|
|
|
|
|
paddingTop: "20%",
|
|
|
|
@ -241,6 +239,12 @@ class DrumPad extends React.Component {
|
|
|
|
|
onClick={this.handleClick}
|
|
|
|
|
>
|
|
|
|
|
{this.props.drumPadKey}
|
|
|
|
|
<audio
|
|
|
|
|
className="clip"
|
|
|
|
|
id={this.props.drumPadKey}
|
|
|
|
|
src={this.props.audioSrc}
|
|
|
|
|
preload="auto"
|
|
|
|
|
/>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|