Drum machine project of FCC
Here's a codepen link https://codepen.io/abhishek-singh77/pen/vYZXaQN
Now let's start.
Open your codepen editor or you can use your Vs code editor in your system as well.
In codepen add the babel CDN in your java script file or add the cdn in your javascript file as well in your vscode.
HTML :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"> </script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<div class="container" id="drum-machine">
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Orbitron');
html, body {
background-color: rgb(179,255,217);
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 24px;
height: 100%;
margin: 1rem 1rem 1rem 1rem;
width: 100%;
}
#app {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
}
#drum-machine {
align-items: center;
background-color: #FFB3D9;
border: 1px solid #86BFA3;
border-radius: 10px;
display: justified;
flex-direction: column;
padding: 20px;
}
#drums {
display: flex;
justify-content: center;
}
#sub-head {
align-self: stretch;
font-family: 'Orbitron', sans-serif;
height: 50px;
margin: 0rem 10rem;
margin-bottom: 150px;
padding: 0 30px;
}
#display {
align-self: stretch;
background-color: rgba(255, 255, 255, 0.29);
border-radius: 5px;
display: flex;
justify-content: center;
flex-direction: column;
font-family: 'Orbitron', sans-serif;
height: 50px;
margin: 10px 170px 10px 150px;
padding: 0 30px;
}
#display span {
text-align: center;
}
#head2 {
font-style: bold;
font-size: 40px;
}
#drums div {
background-color: rgba(255, 255, 255, 0.75);
border-radius: 5px;
color: rgba(0, 0, 0, 0.29);
height: 50px;
width: 50px;
margin: 10px;
min-width: 30px;
margin: 20px 4px;
padding: 12px 10px 2px 10px;
text-align: center;
user-select: none;
}
#drums div:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
}
.active {
background-color: rgba(255, 255, 255, 0.5) !important;
}
JavaScript
const drums = [
{
trigger: 'q',
keyCode: 81,
soundName: 'Heater 1',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
}, {
trigger: 'w',
keyCode: 87,
soundName: 'Heater 2',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
}, {
trigger: 'e',
keyCode: 69,
soundName: 'Heater 3',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
}, {
trigger: 'a',
keyCode: 65,
soundName: 'Heater 4',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'
}, {
trigger: 's',
keyCode: 83,
soundName: 'Clap',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
}, {
trigger: 'd',
keyCode: 68,
soundName: 'Open HH',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'
}, {
trigger: 'z',
keyCode: 90,
soundName: 'Kick N Hat',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
}, {
trigger: 'x',
keyCode: 88,
soundName: 'Kick',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
}, {
trigger: 'c',
keyCode: 67,
soundName: 'Closed HH',
soundURL: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
}
]
const App = () => (
<DrumMachine />
)
class DrumMachine extends React.Component {
state = {
display: 'Click or Press a Key'
}
setDisplay = soundName => {
this.setState(() => ({
display: soundName
}))
}
render () {
return (
<div id='drum-machine'>
<div id='sub-head'>
<span id="head2">Drum Machine</span>
</div>
<div id='display'>
<span>{this.state.display}</span>
</div>
<div id='drums'>
{drums.map(drum => (
<Drum key={drum.trigger} display={this.setDisplay} {...drum} />
))}
</div>
</div>
)
}
}
class Drum extends React.Component {
state = {
active: false
}
componentDidMount = () => {
document.addEventListener('keydown', this.handleKeyPress)
}
componentWillUnmount = () => {
document.removeEventListener('keydown', this.handkleKeyPress)
}
handleKeyPress = e => {
if (e.keyCode === this.props.keyCode) {
this.setState(() => ({
active: true
}))
this.playAudio()
this.props.display(this.props.soundName)
setTimeout(() => {
this.setState(() => ({
active: false
}))
}, 100)
}
}
playAudio = () => {
const clip = document.getElementById(this.props.trigger.toUpperCase())
clip.play()
this.props.display(this.props.soundName)
}
render () {
const { active } = this.state
return (
<div id={this.props.soundName.split(' ').join('-')} className={active ? 'drum-pad active' : 'drum-pad'} onClick={this.playAudio} onKeyPress={this.handleKeyPress}>
<span>{this.props.trigger.toUpperCase()}</span>
<audio id={this.props.trigger.toUpperCase()} className='clip' src={this.props.soundURL}>
</audio>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
Add the above code and run your application it'll work properly.
You can match with the link provided earlier.
0 Comments