In this tutorial, I have learned how to make a sound board today. I have used Html, CSS , and JavaScript.i used javascript to create the Sound Board effect.when buttons is clicked. It is very amazing. So check this code.
Click on this link to pick up these songs
https://github.com/ahtshamhassan1/sound-board
Here's My HTML code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sound Board</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<audio id="applause" src="./sounds/applause.mp3"></audio>
<audio id="boo" src="./sounds/boo.mp3"></audio>
<audio id="gasp" src="./sounds/gasp.mp3"></audio>
<audio id="tada" src="./sounds/tada.mp3"></audio>
<audio id="victory" src="./sounds/victory.mp3"></audio>
<audio id="wrong" src="./sounds/wrong.mp3"></audio>
<div id="buttons"></div>
<script src="./script.js"></script>
</body>
</html>
Here's My CSS Code
@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");
* {
box-sizing: border-box;
}
body {
background-color: rgb(205, 223, 100);
font-family: "Ubuntu", sans-serif;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.btn {
background-color: rgb(230, 24, 151);
border-radius: 5px;
border: none;
color: #fff;
margin: 1rem;
padding: 1.5rem 3rem;
font-size: 1.2rem;
font-family: inherit;
cursor: pointer;
}
.btn:hover {
opacity: 0.9;
}
.btn:focus {
outline: none;
}
Here's My JavaScript code
const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];
sounds.forEach((sound) => {
const btn = document.createElement("button");
btn.classList.add("btn");
btn.innerText = sound;
btn.addEventListener("click", () => {
stopSongs();
document.getElementById(sound).play();
});
document.getElementById("buttons").appendChild(btn);
});
function stopSongs() {
sounds.forEach((sound) => {
const song = document.getElementById(sound);
song.pause();
song.currentTime = 0;
});
}
Here's output on Code pen lets see..
Top comments (0)