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

Here's My HTML code

<html lang="en">

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

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

Enter fullscreen mode Exit fullscreen mode

Here's My CSS Code

@import url("");

* {
  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.innerText = sound;

  btn.addEventListener("click", () => {


function stopSongs() {
  sounds.forEach((sound) => {
    const song = document.getElementById(sound);

    song.currentTime = 0;
Enter fullscreen mode Exit fullscreen mode

Here's output on Code pen lets see..

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓