DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
  });
}
Enter fullscreen mode Exit fullscreen mode

Here's output on Code pen lets see..

Top comments (0)