This content originally appeared on DEV Community and was authored by Kemystra
The project
As the name suggest, we're gonna make a site with drum pads that play sound when triggered ๐ฅ. The site was made with React and SASS. I figured I'll take 3 days to complete this, but circumstances pushed this to 4 days. Life always get in the way, so I should be more prepared about it ๐ช
What I learned
- How to dynamically render components in React
We can use array and its methods, such as Array.map():
render() {
const soundArr = ["blip", "clan", "clap", "cymbal", "kclick", "piano1", "piano2", "snaps", "whoop"];
const keyArr = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];
return (
<div id="drum-machine">
<p id="drum-title">Drum Machine</p>
<Display />
{soundArr.map((soundClip, index) => <DrumPad audioName={soundClip} key={keyArr[index]} cap={keyArr[index]} />)}
</div>
);
}
-
onkeydownevent on the document
To detect key presses on the HTML document, we can use the onkeydown event:
document.onkeydown = (e) => {
let pressedSound = document.getElementById(e.key.toUpperCase());
if(pressedSound) {
pressedSound.play();
document.getElementById("display").innerText = pressedSound.parentElement.id;
}
Note that there used to be onkeypress event, but it is now deprecated.
- Add gradient overlay over background image
We can use background-image CSS property for this:
background-image: linear-gradient(180deg, rgba(0,255,233,0.0) 0%, rgba(0,0,0,1) 100%),
url('https://t4.ftcdn.net/jpg/03/58/36/11/360_F_358361101_z9baaIEmkyst0OQ8mov82r9hen7glZGb.jpg');
Afterwords
It's nearing the end of Ramadan, which means preparation for Eid is incoming. It will be a very busy week. Hope I can still continue doing this throughout Eid celebration.
Anyway, happy Eid for Muslims around the world! โจ
Follow me on Github!
Also on Twitter!
This content originally appeared on DEV Community and was authored by Kemystra
Kemystra | Sciencx (2022-05-01T13:14:15+00:00) Day 20-24: Drum Machine. Retrieved from https://www.scien.cx/2022/05/01/day-20-24-drum-machine/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.