Drum Machine

README.md

Drum Machine

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":"5f0c542a4a2ce5e528e01fdf","templateVersion":"1","templateId":"reactjs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">"],"dependencies":[{"name":"react","version":"16.13.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"},{"name":"react-dom","version":"16.13.1","type":"js","url":"https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"}],"files":[{"id":1,"parentId":0,"name":"public","path":"/public","type":"folder","isRoot":true,"selected":false,"expanded":false,"children":[{"id":2,"name":"index.html"}]},{"id":2,"parentId":1,"name":"index.html","path":"/src/index.html","type":"file","mimeType":"html","isRoot":false,"open":false,"selected":false,"content":"<div id=\"root\"></div>\n"},{"id":3,"parentId":0,"name":"src","path":"/src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":4,"name":"index.js"},{"id":5,"name":"styles.css"}]},{"id":4,"parentId":3,"name":"index.js","path":"/src/index.js","type":"file","mimeType":"es6","isRoot":false,"open":true,"selected":true,"isEntry":true,"content":"\nconst bankOne = [\n\t{\n\t\tkeyCode: 81,    //JS event keycode from https:/keycode.info/\n\t\tkeyTrigger: 'Q',\n\t\tid: 'Heater-1',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 87,\n\t\tkeyTrigger: 'W',\n\t\tid: 'Heater-2',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'\n\t}, \n\t{\n\t\tkeyCode: 69,\n\t\tkeyTrigger: 'E',\n\t\tid: 'Heater-3',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'\n\t}, \n\t{\n\t\tkeyCode: 65,\n\t\tkeyTrigger: 'A',\n\t\tid: 'Heater-4',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 83,\n\t\tkeyTrigger: 'S',\n\t\tid: 'Clap',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'\n\t}, \n\t{\n\t\tkeyCode: 68,\n\t\tkeyTrigger: 'D',\n\t\tid: 'Open-HH',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'\n\t}, \n\t{\n\t\tkeyCode: 90,\n\t\tkeyTrigger: 'Z',\n\t\tid: \"Kick-n'-Hat\",\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'\n\t}, \n\t{\n\t\tkeyCode: 88,\n\t\tkeyTrigger: 'X',\n\t\tid: 'Kick',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 67,\n\t\tkeyTrigger: 'C',\n\t\tid: 'Closed-HH',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'\n\t}\n];\n\nconst bankTwo = [\n\t{\n\t\tkeyCode: 81,\n\t\tkeyTrigger: 'Q',\n\t\tid: 'Chord-1',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 87,\n\t\tkeyTrigger: 'W',\n\t\tid: 'Chord-2',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'\n\t}, \n\t{\n\t\tkeyCode: 69,\n\t\tkeyTrigger: 'E',\n\t\tid: 'Chord-3',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'\n\t}, \n\t{\n\t\tkeyCode: 65,\n\t\tkeyTrigger: 'A',\n\t\tid: 'Shaker',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'\n\t}, \n\t{\n\t\tkeyCode: 83,\n\t\tkeyTrigger: 'S',\n\t\tid: 'Open-HH',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'\n\t}, \n\t{\n\t\tkeyCode: 68,\n\t\tkeyTrigger: 'D',\n\t\tid: 'Closed-HH',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 90,\n\t\tkeyTrigger: 'Z',\n\t\tid: 'Punchy-Kick',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 88,\n\t\tkeyTrigger: 'X',\n\t\tid: 'Side-Stick',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'\n\t}, \n\t{\n\t\tkeyCode: 67,\n\t\tkeyTrigger: 'C',\n\t\tid: 'Snare',\n\t\turl: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'\n\t}\n];\n\nconst activeStyle = {\n\tbackgroundColor: '#F2B705',\n\tboxShadow: \"0 3px #F2B705\",\n\theight: 77,\n\tmarginTop: 13,\n}\n\nconst inactiveStyle = {\n\tbackgroundColor: '#0388A6',\n\tmarginTop: 10,\n\tboxShadow: \"3px 3px 5px black\",\n}\n\nclass DrumPad extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tpadStyle: inactiveStyle\n\t\t}\n\t\tthis.playSound = this.playSound.bind(this);\n\t\tthis.handleKeyPress = this.handleKeyPress.bind(this);\n\t\tthis.activatePad = this.activatePad.bind(this);\n\t}\n\tcomponentDidMount() {\n\t\tdocument.addEventListener('keydown', this.handleKeyPress);\n\t}\n\tcomponentWillUnmount() {\n\t\tdocument.removeEventListener('keydown', this.handleKeyPress);\n\t}\n\thandleKeyPress(e) {\n\t\tif (e.keyCode === this.props.keyCode) {\n\t\t\tthis.playSound();\n\t\t}\n\t}\n\tactivatePad() {\n\t\tif (this.props.power) {\n\t\t\tthis.state.padStyle.backgroundColor === '#F2B705' ? \n\t\t\t\tthis.setState({\n\t\t\t\t\tpadStyle: inactiveStyle\n\t\t\t}) :\n\t\t\tthis.setState({\n\t\t\t\t\tpadStyle: activeStyle\n\t\t\t});\n\t\t} else {\n\t\t\tthis.state.PadStyle.marginTop === 13 ? \n\t\t\t\tthis.setState({\n\t\t\t\t\tpadStyle: inactiveStyle\n\t\t\t}) : \n\t\t\t\tthis.setState({\n\t\t\t\t\tpadstyle: {\n\t\t\t\t\t\theight:77,\n\t\t\t\t\t\tmarginTop: 13,\n\t\t\t\t\t\tbackgroundColor: '#0388A6',\n\t\t\t\t\t\tboxShadow: \"0 3px black\"\n\t\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\tplaySound(e) {\n\t\tconst sound = document.getElementById(this.props.keyTrigger);\n\t\tsound.currentTime = 0;\n\t\tsound.play();\n\t\tthis.activatePad();\n\t\tsetTimeout(() => this.activatePad(), 200);\n\t\tthis.props.updateDisplay(this.props.clipId.replace(/-/g,' '));\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<div id={this.props.clipId}\n\t\t\t\tclassName=\"drum-pad\"\n\t\t\t\tonClick={this.playSound}\n\t\t\t\tstyle={this.state.padStyle}>\n\t\t\t\t\t<audio className='clip' id={this.props.keyTrigger} src={this.props.clip}></audio>\n\t\t\t\t{this.props.keyTrigger}\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nclass PadBank extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t}\n\trender() {\n\t\tlet padBank;\n\t\tthis.props.power ?\n\t\t\tpadBank = this.props.currentPadBank.map((drumObj, i, padBankArr) =>\n\t{\n\t\treturn (\n\t\t\t<DrumPad \n\t\t\t\tclipId={padBankArr[i].id}\n\t\t\t\tclip={padBankArr[i].url}\n\t\t\t\tkeyTrigger={padBankArr[i].keyTrigger}\n\t\t\t\tkeyCode={padBankArr[i].keyCode}\n\t\t\t\tupdateDisplay={this.props.updateDisplay}\n\t\t\t\tpower={this.props.power}\n\t\t\t\t/>\n\t\t)\n\t}) :\n\t\tpadBank = this.props.currentPadBank.map((drumObj, i, padBankArr) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DrumPad \n\t\t\t\t\t\tclipId={padBankArr[i].id} \n\t\t\t\t\t\tclip=\"#\"\n\t\t\t\t\t\tkeyTrigger={padBankArr[i].keyTrigger}\n\t\t\t\t\t\tkeyCode={padBankArr[i].keyCode}\n\t\t\t\t\t\tupdateDisplay={this.props.updateDisplay}\n\t\t\t\t\t\tpower={this.props.power} />\n\t\t\t\t)\n\t\t\t});\n\t\treturn (\n\t\t\t<div className=\"pad-bank\" >\n\t\t\t\t{padBank}\n\t\t\t</div>\n\t\t)\n\t}\n}\n\nclass App extends React.Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tpower: true,\n\t\t\tdisplay: String.fromCharCode(160),   // The Character at 160 is non-breaking space.\n\t\t\tcurrentPadBank: bankOne,\n\t\t\tcurrentPadBankId: 'Heater Kit',\n\t\t\tsliderVal: 0.3\n\t\t}\n\t\tthis.displayClipName = this.displayClipName.bind(this);\n\t\tthis.selectBank = this.selectBank.bind(this);\n\t\tthis.adjustVolume = this.adjustVolume.bind(this);\n\t\tthis.clearDisplay = this.clearDisplay.bind(this);\n\t\tthis.powerControl = this.powerControl.bind(this);\n\t}\n\tpowerControl() {\n\t\tthis.setState({\n\t\t\tpower: !this.state.power,\n\t\t\tdisplay: String.fromCharCode(160)\n\t\t});\n\t}\n\tdisplayClipName(name) {\n\t\tif (this.state.power) {\n\t\t\tthis.setState({\n\t\t\t\tdisplay: name\n\t\t\t});\n\t\t}\n\t}\n\tselectBank() {\n\t\tif (this.state.power) {\n\t\t\tthis.state.currentPadBankId === 'Heater Kit' ? this.setState({\n\t\t\t\tcurrentPadBank: bankTwo,\n\t\t\t\tdisplay: 'Smooth Piano Kit',\n\t\t\t\tcurrentPadBankId: 'Smooth Piano Kit',\n\t\t\t}) : this.setState({\n\t\t\t\tcurrentPadBank: bankOne,\n\t\t\t\tdisplay: 'Heater Kit',\n\t\t\t\tcurrentPadBankId: 'Heater Kit',\n\t\t\t});\n\t\t}\n\t}\n\tadjustVolume(e) {\n\t\tif (this.state.power) {\n\t\t\tthis.setState({\n\t\t\t\tsliderVal: e.target.value,\n\t\t\t\tdisplay: \"Volume: \" + Math.round(e.target.value * 100)\n\t\t\t});\n\t\t\tsetTimeout(() => this.clearDisplay(), 1000);\n\t\t}\n\t}\n\tclearDisplay() {\n\t\tthis.setState({\n\t\t\tdisplay: String.fromCharCode(160)\n\t\t});\n\t}\n\trender() {\n\t\tconst bankSlider = this.state.currentPadBank === bankOne ? {\n\t\t\tfloat: 'left'\n\t\t} : {\n\t\t\tfloat: 'right'\n\t\t};\n\t\tconst clips = [].slice.call(document.getElementsByClassName('clip'));   // Array.prototype.slice.call converts array-like objects into real arrays\n\t\tclips.forEach(sound => {\n\t\t\tsound.volume = this.state.sliderVal\n\t\t});\n\t\tconst powerSlider = this.state.power ? {\n\t\t\tfloat: 'right'\n\t\t} : {\n\t\t\tfloat: 'left'\n\t\t};\n\t\treturn(\n\t\t\t<div id=\"drum-machine\" className=\"inner-container\">\n\t\t\t\t<PadBank\n\t\t\t\t\tpower={this.state.power}\n\t\t\t\t\tupdateDisplay={this.displayClipName}\n\t\t\t\t\tcurrentPadBank={this.state.currentPadBank}\n\t\t\t\t\tclipVolume={this.state.sliderVal}\n\t\t\t\t/>\n\t\t\t\t\n\t\t\t\t<div className=\"controls-container\">\n\t\t\t\t\t\n\t\t\t\t\t<div className=\"control\">\n\t\t\t\t\t\t<p>Power</p>\n\t\t\t\t\t\t<div onClick={this.powerControl} className=\"select\">\n\t\t\t\t\t\t\t<div style={powerSlider} className=\"inner\"/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p id=\"display\">\n\t\t\t\t\t\t{this.state.display}\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"volume-slider\">\n\t\t\t\t\t\t<input type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value={this.state.sliderVal} onChange={this.adjustVolume} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"control\">\n\t\t\t\t\t\t<p>Bank</p>\n\t\t\t\t\t\t<div onClick={this.selectBank} className=\"select\">\n\t\t\t\t\t\t\t<div style={bankSlider} className=\"inner\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n}\n\n\n\n\n\n\n\n\n\nReactDOM.render(<App/>, document.getElementById('root'));\n"},{"id":5,"parentId":3,"name":"styles.css","path":"/src/styles.css","type":"file","mimeType":"css","isRoot":false,"open":false,"selected":false,"content":"body {\n  font-family: \"Source Sans Pro\", sans-serif;\n  font-weight: 700;\n  font-size: 1.1em;\n  background-color: #590212;\n  user-select: none;\n}\n\n#root {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n}\n\n.inner-container {\n  outline: 5px solid #f29f05;\n  position: relative;\n  width: 660px;\n  text-align: center;\n  background-color: #733702;\n}\n\n.pad-bank {\n  width: 332px;\n  height: 272px;\n  display: inline-block;\n  margin: 20px;\n}\n\n.drum-pad {\n  position: relative;\n  float: left;\n  width: 100px;\n  height: 80px;\n  margin-right: 10px;\n  border-radius: 5px;\n  padding-top: 35px;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.controls-container {\n  width: 240px;\n  height: 272px;\n  display: inline-block;\n  margin: 40px 20px 0 10px;\n  vertical-align: top;\n}\n\n.control {\n  width: 100px;\n  margin: auto;\n}\n\n.control p {\n  margin-bottom: 0;\n}\n\n.control .select {\n  margin: auto;\n  border: 1px solid black;\n  width: 50px;\n  height: 20px;\n  padding: 1px;\n  background-color: black;\n}\n\n.control .inner {\n  width: 23px;\n  height: 19px;\n  background: #f2b705;\n  border: 1px solid black;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n#display {\n  width: 200px;\n  background-color: #a67b56;\n  border: 1.5px solid;\n  margin: 15px auto;\n  padding: 15px;\n  box-sizing: border-box;\n}\n\n@media screen and (max-width: 650px) {\n  .inner-container {\n    transform: scale(0.7);\n  }\n}"}],"experimentId":"5f7df0ebf4bb6c001798e54a"}