Today I have learned to Creat a Sound Board

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..

Blog

Today I have learned to Creat a Sound Board

Ahtsham Ajus

Join Our Newsletter. No Spam, Only the good stuff.

Related