This JavaScript code provides a ready-to-use solution for creating a dynamic music beat maker interface. With just a few lines of code, you can integrate this beat maker into your project and allow users to create their own beats in real time.
The code utilizes HTML, CSS, and JavaScript to build the beat maker interface. Additionally, it includes audio elements for various drum sounds like Tom, Clap, Kick, Open Hat, Boom, Ride, and Snare. Each drum sound is associated with a button that triggers the playback of the corresponding audio when clicked.
The beat maker interface is divided into columns representing different drum sounds. Each column contains squares that represent beats in a sequence. Users can click on the squares to activate or deactivate them, creating a custom rhythm pattern. The beat length is customizable, allowing for flexibility in creating beats of different lengths.
How to Create Music Beat Maker using JavaScript
1. First, create the HTML structure for the music beat maker as follows:
<div class="container">
<div class="audio-list">
<div class="audio tom-btn">
<p>Tom</p>
<audio id="tAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/tom.wav">
</source>
</audio>
</div>
<div class="audio clap-btn">
<p>Clap</p>
<audio id="cAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/clap.wav
">
</source>
</audio>
</div>
<div class="audio kick-btn">
<p>Kick</p>
<audio id="kAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/kick.wav">
</source>
</audio>
</div>
<div class="audio openhat-btn">
<p>Open Hat</p>
<audio id="oAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/openhat.wav">
</source>
</audio>
</div>
<div class="audio boom-btn">
<p>Boom</p>
<audio id="bAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/boom.wav">
</source>
</audio>
</div>
<div class="audio ride-btn">
<p>Ride</p>
<audio id="rAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/ride.wav">
</source>
</audio>
</div>
<div class="audio snare-btn">
<p>Snare</p>
<audio id="sAudio">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1147877/snare.wav">
</source>
</audio>
</div>
</div>
<div class="audio-board">
<div class="title">
<h1>Beat Maker</h1>
</div>
<div class="play-btn">
<div class="btn play" onClick="play();"></div>
<div class="btn stop" onClick="stop();"></div>
</div>
<div class="tomColumn column">
<div class="square tom tom1"></div>
<div class="square tom tom2"></div>
<div class="square tom tom3"></div>
<div class="square tom tom4"></div>
<div class="square tom tom5"></div>
<div class="square tom tom6"></div>
<div class="square tom tom7"></div>
<div class="square tom tom8"></div>
</div>
<div class="clapColumn column">
<div class="square clap clap1"></div>
<div class="square clap clap2"></div>
<div class="square clap clap3"></div>
<div class="square clap clap4"></div>
<div class="square clap clap5"></div>
<div class="square clap clap6"></div>
<div class="square clap clap7"></div>
<div class="square clap clap8"></div>
</div>
<div class="kickColumn column">
<div class="square kick kick1"></div>
<div class="square kick kick2"></div>
<div class="square kick kick3"></div>
<div class="square kick kick4"></div>
<div class="square kick kick5"></div>
<div class="square kick kick6"></div>
<div class="square kick kick7"></div>
<div class="square kick kick8"></div>
</div>
<div class="hatColumn column">
<div class="square hat hat1"></div>
<div class="square hat hat2"></div>
<div class="square hat hat3"></div>
<div class="square hat hat4"></div>
<div class="square hat hat5"></div>
<div class="square hat hat6"></div>
<div class="square hat hat7"></div>
<div class="square hat hat8"></div>
</div>
<div class="boomColumn column">
<div class="square boom boom1"></div>
<div class="square boom boom2"></div>
<div class="square boom boom3"></div>
<div class="square boom boom4"></div>
<div class="square boom boom5"></div>
<div class="square boom boom6"></div>
<div class="square boom boom7"></div>
<div class="square boom boom8"></div>
</div>
<div class="rideColumn column">
<div class="square ride ride1"></div>
<div class="square ride ride2"></div>
<div class="square ride ride3"></div>
<div class="square ride ride4"></div>
<div class="square ride ride5"></div>
<div class="square ride ride6"></div>
<div class="square ride ride7"></div>
<div class="square ride ride8"></div>
</div>
<div class="snareColumn column">
<div class="square snare snare1"></div>
<div class="square snare snare2"></div>
<div class="square snare snare3"></div>
<div class="square snare snare4"></div>
<div class="square snare snare5"></div>
<div class="square snare snare6"></div>
<div class="square snare snare7"></div>
<div class="square snare snare8"></div>
</div>
</div>
</div>
2. Now, use the following CSS code to style the beat maker interface:
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #616161; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9bc5c3, #616161); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #9bc5c3, #616161) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container {
width: 80%;
min-width: 800px;
height: 70%;
min-height: 400px;
display: flex;
position: relative;
}
.container .audio-list {
width: 20%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.container .audio-list .audio {
width: 120px;
height: 60px;
background-color: #eee;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.container .audio-list .audio:hover {
cursor: pointer;
}
.container .audio-board {
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.container .audio-board .title {
width: 100%;
position: absolute;
top: -80px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.container .audio-board .title h1 {
display: block;
padding: 10px 40px;
color: #fff;
background-color: #f78259;
}
.container .audio-board .play-btn {
width: 100%;
position: absolute;
bottom: -80px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.container .audio-board .play-btn .btn {
display: block;
width: 60px;
height: 60px;
background-color: #f78259;
border-radius: 50%;
position: relative;
}
.container .audio-board .play-btn .btn:hover {
cursor: pointer;
}
.container .audio-board .play-btn .play {
display: block;
}
.container .audio-board .play-btn .play:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 15px;
left: 22px;
border-top: 15px solid transparent;
border-left: 20px solid #fff;
border-bottom: 15px solid transparent;
}
.container .audio-board .play-btn .stop {
display: none;
}
.container .audio-board .play-btn .stop:before {
content: "";
width: 24px;
height: 24px;
background-color: #fff;
position: absolute;
top: 18px;
left: 18px;
}
.container .audio-board .play-btn .not-active {
opacity: 0.5;
}
.container .audio-board .play-btn .not-active:hover {
cursor: default;
}
.container .audio-board .column {
width: 100%;
display: flex;
justify-content: space-around;
}
.container .audio-board .column .square {
width: 55px;
height: 55px;
transition: all 0.2s;
}
.container .audio-board .column .square:hover {
cursor: pointer;
}
.container .audio-board .column .active-btn {
transform: scale(1.2);
}
.container .audio-board .column .tom {
background-color: #00b7d4;
opacity: 0.3;
}
.container .audio-board .column .clap {
background-color: #ff80ff;
opacity: 0.3;
}
.container .audio-board .column .kick {
background-color: #cde800;
opacity: 0.3;
}
.container .audio-board .column .hat {
background-color: #7659f7;
opacity: 0.3;
}
.container .audio-board .column .boom {
background-color: #ff962e;
opacity: 0.3;
}
.container .audio-board .column .ride {
background-color: #20e381;
opacity: 0.3;
}
.container .audio-board .column .snare {
background-color: #1d56b8;
opacity: 0.3;
}
.container .audio-board .column .play {
opacity: 1;
}
3. Finally, add the following JavaScript code to your project to activate beats functionality.
const tomBeat = document.getElementById("tAudio");
const tomBtn = document.querySelector(".tom-btn");
const clapBeat = document.getElementById("cAudio");
const clapBtn = document.querySelector(".clap-btn");
const kickBeat = document.getElementById("kAudio");
const kickBtn = document.querySelector(".kick-btn");
const openHatBeat = document.getElementById("oAudio");
const openHatBtn = document.querySelector(".openhat-btn");
const boomBeat = document.getElementById("bAudio");
const boomBtn = document.querySelector(".boom-btn");
const rideBeat = document.getElementById("rAudio");
const rideBtn = document.querySelector(".ride-btn");
const snareBeat = document.getElementById("sAudio");
const snareBtn = document.querySelector(".snare-btn");
const toms = document.querySelectorAll(".tom");
const claps = document.querySelectorAll(".clap");
const kicks = document.querySelectorAll(".kick");
const hats = document.querySelectorAll(".hat");
const booms = document.querySelectorAll(".boom");
const rides = document.querySelectorAll(".ride");
const snares = document.querySelectorAll(".snare");
const playBtn = document.querySelector(".play");
const stopBtn = document.querySelector(".stop");
const addBtns = (list) => {
list.forEach(el => {
el.addEventListener("click", (e) => {
console.log(e);
if(e.target.classList.contains("play")) {
e.target.classList.remove("play");
} else {
e.target.classList.add("play");
}
})
});
}
addBtns(toms);
addBtns(claps);
addBtns(kicks);
addBtns(hats);
addBtns(booms);
addBtns(rides);
addBtns(snares);
let tempo = 200;
// let play = false;
let beatLength = 8;
const iterate = (list, timing, sound) => {
list.forEach((el, i) => {
setTimeout(() => {
el.classList.add("active-btn");
if(el.classList.contains("play")) {
sound();
}
setTimeout(() => {
el.classList.remove("active-btn");
}, timing)
}, i * timing)
});
};
tomBtn.addEventListener("click", () => playTom());
clapBtn.addEventListener("click", () => playClap());
kickBtn.addEventListener("click", () => playKick());
openHatBtn.addEventListener("click", () => playHat());
boomBtn.addEventListener("click", () => playBoom());
rideBtn.addEventListener("click", () => playRide());
snareBtn.addEventListener("click", () => playSnare());
const playTom = () => {
tomBeat.currentTime = 0;
tomBeat.play();
}
const playClap = () => {
clapBeat.currentTime = 0;
clapBeat.play();
}
const playKick = () => {
kickBeat.currentTime = 0;
kickBeat.play();
}
const playHat = () => {
openHatBeat.currentTime = 0;
openHatBeat.play();
}
const playBoom = () => {
boomBeat.currentTime = 0;
boomBeat.play();
}
const playRide = () => {
rideBeat.currentTime = 0;
rideBeat.play();
}
const playSnare = () => {
snareBeat.currentTime = 0;
snareBeat.play();
}
const playSounds = (i) => {
iterate(toms, tempo, playTom);
iterate(claps, tempo, playClap);
iterate(kicks, tempo, playKick);
iterate(hats, tempo, playHat);
iterate(booms, tempo, playBoom);
iterate(rides, tempo, playRide);
iterate(snares, tempo, playSnare);
}
// const playAll = () => {
// let i;
// for(i=0; i<5; i++) {
// playSounds(i);
// }
// }
let musicPlaying;
const play = () => {
musicPlaying = setInterval(playSounds, tempo*8);
playBtn.style.display = "none";
stopBtn.style.display = "block";
// playBtn.removeAttribute("onclick");
// stopBtn.setAttribute("onclick",stop());
// playBtn.classList.add("not-active");
// stopBtn.classList.remove("not-active");
}
const stop = () => {
clearInterval(musicPlaying);
stopBtn.style.display = "none";
playBtn.style.display = "block";
// stopBtn.removeAttribute("onclick");
// playBtn.setAttribute("onclick",play());
// stopBtn.classList.add("not-active");
// playBtn.classList.remove("not-active");
}
That’s it! hopefully, you have successfully created a music beat maker using HTML, CSS & JavaScript. If you have any questions or suggestions, feel free to comment below.
