/*
https://docs.google.com/uc?export=download&id=1_855IYWDt2QWWvSArqZmYoY5IIvSZk5R
https://docs.google.com/uc?export=download&id=1Z3N1q3bNBE-fL5qx0OeSGO-QtZnj576L
https://docs.google.com/uc?export=download&id=11cvGqgkDv8p_-oSm7D0sQrpBNHv7afci
https://docs.google.com/uc?export=download&id=1Vb5iwuaKxY8uj2tcGY1YqIcrLtHpcklM
https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E
https://docs.google.com/uc?export=download&id=1vcwP-8mZKIxSXkN7VrnPlW4WKybxx2oO
https://docs.google.com/uc?export=download&id=1HQ9vW2JGPvj9lRRdcwLG1CyLxDZCASUW
https://docs.google.com/uc?export=download&id=1ZwX2fyo8-8O3kuBv_CYBUJasgD9aMsCP
https://docs.google.com/uc?export=download&id=1HWaP1QsyHMBG6qcoD8N07BrsdGLY1RWb
https://docs.google.com/uc?export=download&id=1zZvuH6vXzVnwlj2lsN7uSSgwxM_pPINn
https://docs.google.com/uc?export=download&id=1DRMBWbg4NKdWdXDEqmw0UrzmZZb3TeQD
https://docs.google.com/uc?export=download&id=1gO2tg3q6kpYWvqU5SApfZ8irAXpMFMJb
https://docs.google.com/uc?export=download&id=1n4I_RPblpUqd3gDkX3dHnw_ql0bNF2YS
https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6
https://docs.google.com/uc?export=download&id=1qNXOw1kOpXUL3gJtDS0bbuhFPkj493mZ
https://docs.google.com/uc?export=download&id=1LNip_dxsfFiTC-n1y0Lki6ZWMCSUs1Om
*/
class Navbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<a className="navbar-brand" href="#">
{this.props.brand || "Title"}
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">
Home <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
About
</a>
</li>
</ul>
</div>
</nav>
);
}
}
class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<footer className="footer">
<div className="container">
<p className="text-muted text-footer">Made with 🍫 by <a href="https://mrcrjs.github.io/" target="_blank">Marco A. Rojas</a></p>
</div>
</footer>
);
}
}
class Beatbox extends React.Component {
constructor(props) {
super(props);
this.state = {
displayText: "BEATBOX XLII",
pad: {
q: false,
w: false,
e: false,
a: false,
s: false,
d: false,
z: false,
x: false,
c: false
},
audioSourceSelected: 'c'
};
this.drumMachine = React.createRef();
this.audioPad = {
q: React.createRef(),
w: React.createRef(),
e: React.createRef(),
a: React.createRef(),
s: React.createRef(),
d: React.createRef(),
z: React.createRef(),
x: React.createRef(),
c: React.createRef()
};
this.audioSources = {
q: {
a:
"https://docs.google.com/uc?export=download&id=1_855IYWDt2QWWvSArqZmYoY5IIvSZk5R",
b:
"https://docs.google.com/uc?export=download&id=1Z3N1q3bNBE-fL5qx0OeSGO-QtZnj576L",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/boom.wav"
},
w: {
a:
"https://docs.google.com/uc?export=download&id=11cvGqgkDv8p_-oSm7D0sQrpBNHv7afci",
b:
"https://docs.google.com/uc?export=download&id=1Vb5iwuaKxY8uj2tcGY1YqIcrLtHpcklM",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/clap.wav"
},
e: {
a:
"https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E",
b:
"https://docs.google.com/uc?export=download&id=1vcwP-8mZKIxSXkN7VrnPlW4WKybxx2oO",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/hihat.wav"
},
a: {
a:
"https://docs.google.com/uc?export=download&id=1HQ9vW2JGPvj9lRRdcwLG1CyLxDZCASUW",
b:
"https://docs.google.com/uc?export=download&id=1ZwX2fyo8-8O3kuBv_CYBUJasgD9aMsCP",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/kick.wav"
},
s: {
a:
"https://docs.google.com/uc?export=download&id=1HWaP1QsyHMBG6qcoD8N07BrsdGLY1RWb",
b:
"https://docs.google.com/uc?export=download&id=1zZvuH6vXzVnwlj2lsN7uSSgwxM_pPINn",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/openhat.wav"
},
d: {
a:
"https://docs.google.com/uc?export=download&id=1DRMBWbg4NKdWdXDEqmw0UrzmZZb3TeQD",
b:
"https://docs.google.com/uc?export=download&id=1gO2tg3q6kpYWvqU5SApfZ8irAXpMFMJb",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/ride.wav"
},
z: {
a:
"https://docs.google.com/uc?export=download&id=1n4I_RPblpUqd3gDkX3dHnw_ql0bNF2YS",
b:
"https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/snare.wav"
},
x: {
a:
"https://docs.google.com/uc?export=download&id=1qNXOw1kOpXUL3gJtDS0bbuhFPkj493mZ",
b:
"https://docs.google.com/uc?export=download&id=1LNip_dxsfFiTC-n1y0Lki6ZWMCSUs1Om",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav"
},
c: {
a:
"https://docs.google.com/uc?export=download&id=1mKlbUJiX5nsrr0Z_xbLL8ASUesG7cf8E",
b:
"https://docs.google.com/uc?export=download&id=18uYmgyXzAQllmCddZgzldhhfg0aF2ni6",
c: "https://github.com/wesbos/JavaScript30/raw/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tom.wav"
}
};
this.pressedPadButton = this.pressedPadButton.bind(this);
this.unpressedPadButton = this.unpressedPadButton.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.handleKeyUp = this.handleKeyUp.bind(this);
this.handleClickDown = this.handleClickDown.bind(this);
this.handleClickUp = this.handleClickUp.bind(this);
}
componentDidMount() {
this.drumMachine.current.focus();
}
isPadKey(k) {
return !!(['q', 'w', 'e', 'a', 's', 'd', 'z', 'x', 'c'].indexOf(k) + 1);
}
getDisplayText(k) {
const audioDescription = {
q: "Boom",
w: "Clap",
e: "Hi-hat",
a: "Kick",
s: "Open Hat",
d: "Ride",
z: "Snare",
x: "Tink",
c: "Tom"
}
return audioDescription[k];
}
pressedPadButton(key) {
if (this.isPadKey(key) && !this.state.pad[key]) {
let updatedPad = { ...this.state.pad };
updatedPad[key] = true;
this.setState({
pad: { ...updatedPad },
displayText: this.getDisplayText(key)
},
() => {
this.audioPad[key].current.currentTime = 0;
this.audioPad[key].current.play();
}
);
}
}
unpressedPadButton(key) {
if (this.isPadKey(key) && this.state.pad[key]) {
let updatedPad = { ...this.state.pad };
updatedPad[key] = false;
this.audioPad[key].current.pause();
this.setState({
pad: { ...updatedPad }
},
() => this.audioPad[key].current.pause()
);
}
}
handleClickDown(btn) {
this.pressedPadButton(btn);
}
handleClickUp(btn) {
this.unpressedPadButton(btn);
}
handleKeyDown(e) {
const key = e.key.toLowerCase();
this.pressedPadButton(key);
}
handleKeyUp(e) {
const key = e.key.toLowerCase();
this.unpressedPadButton(key);
}
render() {
return (
<div
ref={this.drumMachine}
id="drum-machine"
className="beatbox-main"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
tabIndex="-1"
>
<div className="beatbox-container">
<div id="display" className="beatbox-screen">
<span className="beatbox-screen-text">
{this.state.displayText}
</span>
</div>
<div className="beatbox-brand-container">
<p className="beatbox-brand-text">BTB-XLII</p>
</div>
<div className="beatbox-controllers" />
<div className="beatbox-panel">
<div className="beatbox-panel-row">
<div
className={
this.state.pad["q"] ? "drum-pad pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("q")}
onMouseUp={() => this.handleClickUp("q")}
onTouchStart={() => this.handleClickDown("q")}
onTouchEnd={() => this.handleClickUp("q")}
>
<div
className={"beatbox-light"}
style={this.state.pad["q"] ? { opacity: 0.8 } : null}
/>
Q
<audio
preload="auto"
ref={this.audioPad["q"]}
id="Q"
className="clip"
src={this.audioSources['q'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["w"] ? "drum-pad yellow-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("w")}
onMouseUp={() => this.handleClickUp("w")}
onTouchStart={() => this.handleClickDown("w")}
onTouchEnd={() => this.handleClickUp("w")}
>
<div
className={"beatbox-yellow-light"}
style={this.state.pad["w"] ? { opacity: 0.8 } : null}
/>
W
<audio
preload="auto"
ref={this.audioPad["w"]}
id="W"
className="clip"
src={this.audioSources['w'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["e"] ? "drum-pad yellow-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("e")}
onMouseUp={() => this.handleClickUp("e")}
onTouchStart={() => this.handleClickDown("e")}
onTouchEnd={() => this.handleClickUp("e")}
>
<div
className={"beatbox-yellow-light"}
style={this.state.pad["e"] ? { opacity: 0.8 } : null}
/>
E
<audio
preload="auto"
ref={this.audioPad["e"]}
id="E"
className="clip"
src={this.audioSources['e'][this.state.audioSourceSelected]}
/>
</div>
</div>
<div className="beatbox-panel-row">
<div
className={
this.state.pad["a"] ? "drum-pad red-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("a")}
onMouseUp={() => this.handleClickUp("a")}
onTouchStart={() => this.handleClickDown("a")}
onTouchEnd={() => this.handleClickUp("a")}
>
<div
className={"beatbox-red-light"}
style={this.state.pad["a"] ? { opacity: 0.8 } : null}
/>
A
<audio
preload="auto"
ref={this.audioPad["a"]}
id="A"
className="clip"
src={this.audioSources['a'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["s"] ? "drum-pad blue-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("s")}
onMouseUp={() => this.handleClickUp("s")}
onTouchStart={() => this.handleClickDown("s")}
onTouchEnd={() => this.handleClickUp("s")}
>
<div
className={"beatbox-blue-light"}
style={this.state.pad["s"] ? { opacity: 0.8 } : null}
/>
S
<audio
preload="auto"
ref={this.audioPad["s"]}
id="S"
className="clip"
src={this.audioSources['s'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["d"] ? "drum-pad blue-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("d")}
onMouseUp={() => this.handleClickUp("d")}
onTouchStart={() => this.handleClickDown("d")}
onTouchEnd={() => this.handleClickUp("d")}
>
<div
className={"beatbox-blue-light"}
style={this.state.pad["d"] ? { opacity: 0.8 } : null}
/>
D
<audio
preload="auto"
ref={this.audioPad["d"]}
id="D"
className="clip"
src={this.audioSources['d'][this.state.audioSourceSelected]}
/>
</div>
</div>
<div className="beatbox-panel-row">
<div
className={
this.state.pad["z"] ? "drum-pad red-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("z")}
onMouseUp={() => this.handleClickUp("z")}
onTouchStart={() => this.handleClickDown("z")}
onTouchEnd={() => this.handleClickUp("z")}
>
<div
className={"beatbox-red-light"}
style={this.state.pad["z"] ? { opacity: 0.8 } : null}
/>
Z
<audio
preload="auto"
ref={this.audioPad["z"]}
id="Z"
className="clip"
src={this.audioSources['z'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["x"] ? "drum-pad blue-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("x")}
onMouseUp={() => this.handleClickUp("x")}
onTouchStart={() => this.handleClickDown("x")}
onTouchEnd={() => this.handleClickUp("x")}
>
<div
className={"beatbox-blue-light"}
style={this.state.pad["x"] ? { opacity: 0.8 } : null}
/>
X
<audio
preload="auto"
ref={this.audioPad["x"]}
id="X"
className="clip"
src={this.audioSources['x'][this.state.audioSourceSelected]}
/>
</div>
<div
className={
this.state.pad["c"] ? "drum-pad blue-pressed" : "drum-pad"
}
onMouseDown={() => this.handleClickDown("c")}
onMouseUp={() => this.handleClickUp("c")}
onTouchStart={() => this.handleClickDown("c")}
onTouchEnd={() => this.handleClickUp("c")}
>
<div
className={"beatbox-blue-light"}
style={this.state.pad["c"] ? { opacity: 0.8 } : null}
/>
C
<audio
preload="auto"
ref={this.audioPad["c"]}
id="C"
className="clip"
src={this.audioSources['c'][this.state.audioSourceSelected]}
/>
</div>
</div>
</div>
</div>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = { currentPage: "home" };
}
render() {
return (
<div>
<header>
<Navbar
brand="Beatbox"
activePage={this.state.currentPage}
color="inverse"
/>
</header>
<div className="container mt-5">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<h1>Beatbox</h1>
<p className="lead text-muted">FCC beatbox project</p>
</div>
</div>
<div className="row">
<div className="col-md-2 text-muted">
<div className="valign-center text-center">
<p>
Q W E
<br/>
A S D
<br/>
Z X C
</p>
</div>
</div>
<div className="col-sm-12 col-md-8">
<div className="d-flex justify-content-center">
<Beatbox />
</div>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
!
