Created
August 19, 2019 00:32
-
-
Save CalisaP/90289530ccb01508a551dea5a81f66f2 to your computer and use it in GitHub Desktop.
fCC Drum Machine
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
| <link rel="stylesheet" href="https://bootswatch.com/4/sketchy/bootstrap.css"> | |
| </head> | |
| <body> | |
| <div id="app"/> | |
| </body> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const buttonSounds = [ | |
| { | |
| key: "Q", | |
| keyCode: 81, | |
| id: "snare", | |
| src: "https://freewavesamples.com/files/Ensoniq-ESQ-1-Snare.wav", | |
| displayString: "Snare" | |
| }, | |
| { | |
| key: "W", | |
| keyCode: 87, | |
| id: "hi-hat", | |
| src: "https://freewavesamples.com/files/Closed-Hi-Hat-1.wav", | |
| displayString: "Hi-Hat" | |
| }, | |
| { | |
| key: "E", | |
| keyCode: 69, | |
| id: "bamboo", | |
| src: "https://freewavesamples.com/files/Bamboo.wav", | |
| displayString: "Bamboo" | |
| }, | |
| { | |
| key: "A", | |
| keyCode: 65, | |
| id: "cymbals", | |
| src: "https://freewavesamples.com/files/Crash-Cymbal-1.wav", | |
| displayString: "Cymbals" | |
| }, | |
| { | |
| key: "S", | |
| keyCode: 83, | |
| id: "kick-drum", | |
| src: "https://freewavesamples.com/files/Bass-Drum-1.wav", | |
| displayString: "Kick Drum" | |
| }, | |
| { | |
| key: "D", | |
| keyCode: 68, | |
| id: "clap", | |
| src: "https://freewavesamples.com/files/Clap-1.wav", | |
| displayString: "Clap" | |
| }, | |
| { | |
| key: "Z", | |
| keyCode: 90, | |
| id: "high-tom", | |
| src: "https://freewavesamples.com/files/Electro-Tom.wav", | |
| displayString: "High Tom" | |
| }, | |
| { | |
| key: "X", | |
| keyCode: 88, | |
| id: "bottle", | |
| src: "https://freewavesamples.com/files/Bottle.wav", | |
| displayString: "Bottle" | |
| }, | |
| { | |
| key: "C", | |
| keyCode: 67, | |
| id: "cross-sticks", | |
| src: "https://freewavesamples.com/files/Cross-Sticks.wav", | |
| displayString: "Cross Sticks" | |
| } | |
| ]; | |
| class Buttons extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| instrument: '', | |
| }; | |
| this.handleClick = this.handleClick.bind(this); | |
| this.handleKeyDown = this.handleKeyDown.bind(this); | |
| } | |
| //Updates sound and display when key is pressed down | |
| ComponentDidMount(){ | |
| document.addEventListener('keydown', this.handleKeyDown) | |
| }; | |
| ComponentWillUnmount(){ | |
| document.removeEventListener('keydown', this.handleKeyDown) | |
| }; | |
| handleKeyDown(e, sound){ | |
| if (e.key === sound.key){ | |
| const soundClip = document.getElementById(sound.key); | |
| soundClip.currentTime = 0; | |
| soundClip.play(); | |
| this.setState({ | |
| instrument: sound.displayString, | |
| }); | |
| } | |
| }; | |
| // Updates sound and display when a button is clicked | |
| handleClick(e, sound) { | |
| const soundClip = document.getElementById(sound.key); | |
| soundClip.currentTime = 0; | |
| soundClip.play(); | |
| this.setState({ | |
| instrument: sound.displayString, | |
| }); | |
| } | |
| render() { | |
| return ( | |
| <div tabIndex="0"> | |
| <div id="display-div"> | |
| <Display instrument={this.state.instrument} /> | |
| </div> | |
| <div className="container-fluid"> | |
| <div id="drum-pad-div" className="row justify-content-center"> | |
| <div className="col col-sm-5 btn-toolbar btn-group-lg"> | |
| {this.props.soundBank.map(sound => ( | |
| <button | |
| className="drum-pad btn btn-primary" | |
| id={sound.id} | |
| keyCode={sound.keyCode} | |
| onClick={(e) => this.handleClick(e, sound)} | |
| onKeyPress={(e) => this.handleKeyDown(e, sound)} | |
| > | |
| {sound.key} | |
| <audio | |
| className="clip" | |
| id={sound.key} | |
| src={sound.src} | |
| /> | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| } | |
| // Displays instrument name | |
| const Display = props => { | |
| return ( | |
| <div> | |
| <h3 id="displayTitle" className="text-center">Instrument:</h3> | |
| <p id="display" className="text-center">{props.instrument}</p> | |
| </div> | |
| ); | |
| }; | |
| class DrumMachineApp extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| soundBank: buttonSounds | |
| }; | |
| } | |
| render() { | |
| return ( | |
| <div id="drum-machine"> | |
| <h1 id="title" className="text-center">C's Drum Machine</h1> | |
| <h2 id = "subtitle" className="text-center">Play Some Funky Music!</h2> | |
| <div className="container"> | |
| <div className="row justify-content-center"> | |
| <div className="col-auto"> | |
| <Buttons soundBank={this.state.soundBank} /> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| } | |
| ReactDOM.render(<DrumMachineApp />, document.getElementById("app")); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #drum-machine{ | |
| border: 1px solid #CFD8DC; | |
| border-radius: 25px; | |
| background-color: #fff; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | |
| margin: 30px 20px 30px 20px; | |
| padding: 20px; | |
| } | |
| #title{ | |
| margin: 20px 20px 0px 20px; | |
| } | |
| #subtitle{ | |
| font-size: 25px; | |
| } | |
| #display-div{ | |
| margin-top: 10px; | |
| } | |
| #displayTitle{ | |
| font-size: 20px; | |
| } | |
| #display{ | |
| font-size: 18px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/cerulean/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment