Drum kit - React

drum-kit-react.markdown

Drum kit - React

A Pen by Vasilii V on CodePen.

License.

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id='drum-machine'>
</div>
 

script.babel

const arrOfButtons = [{text : 'Q', id:'clap', source:"http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/EMU%20E-Drum/Clap.wav"},
    {text : 'W', id:'kick', source:"http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/DeepSky%20Drumbox/909KICK.WAV"},
    {text : 'E', id:'bongo', source:"http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/Acetone%20Rhythm-King/Bongo.wav"},
    {text : 'A', id:'snare', source:"http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/Acetone%20Rhythm-King/Snare.wav"},
    {text : 'S', id:'crash', source:"http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/Acetone%20Rhythm-King/Crash.wav"},
    {text : 'D', id:'wood', source: "http://sound.constantvzw.org/OpenSound/SAMPLES_ET_SONS_DIVERS/downloads/Acetone%20Rhythm-King/Wood.wav"},
    {text: 'Z', id:'solo1', source: 'http://samplearena.com/cdrom/sa5/sa5rock_demo.mp3'},
    {text : 'X', id: 'solo2', source:'http://samplearena.com/cdrom/sa5/sa5rock_demo.mp3'},
    { text : 'C', id : 'solo3', source : 'http://samplearena.com/cdrom/sa5/sa5rock_demo.mp3'}];

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.playsound = this.playsound.bind(this);
    this.state = {
      data: ''
    };
  }
  playsound() {
    let x = document.getElementById(this.props.text); 
    this.setState({
      data: this.props.id
    });
    this.props.methodfromparent(this.state.data);
    x.play();
  }
  
 
  
  render() {
    
    return (
      
        <div class = 'container' > <button class='drum-pad' onClick={this.playsound} id={this.props.id} >{this.props.text}  <audio id = {this.props.text} src={this.props.source} class='clip' /></button> </div>
    );
  }
}



class Display extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.parentmethod = this.parentmethod.bind(this); 
    this.state = {
     todisplay: 'React Drum Kit'
    };
  }
  handleKeyPress(e) {
    let y = e.key.toUpperCase();
    let z = document.getElementById(y);
    for (let a = 0; a<arrOfButtons.length; a++) {
      if (arrOfButtons[a].text === y) {
        this.setState({todisplay: arrOfButtons[a].id})
      }     
    }
    z.play();
  
  }
  
  parentmethod(data) {
    this.setState({
      todisplay: data
    });
  }
 
componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }
  
  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }
 
   
  
  render() { 
    const buttons = arrOfButtons.map(e => {
      return <Button methodfromparent={this.parentmethod} onClick='this.props.updateText' text = {e.text} source = {e.source} id = {e.id} />});
    return (
      <div id='display'>
        
        {buttons}
      <div id='instrument'>{this.state.todisplay} </div>  
      </div>
    )
           }
}

ReactDOM.render(<Display />, document.getElementById("drum-machine"));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>

style.css

html {
  font-size: 10px;
  font-color:white;
  background-size: cover;
  background: url(http://i.imgur.com/b9r5sEL.jpg) no-repeat center center fixed; 
  background-size: cover;
}

body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container  {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
 display: inline-block;
 
}
#display {
  height: 100vh;
  width: 100vw;
  text-color:red;
}
#instrument {
  font-size: 3rem;
  color: white;
  text-align: center
}