Javascript

Javascript - Sound Board

HiroDaegu 2021. 10. 2. 00:09

728x90

SMALL

<!DOCTYPE html>
<html lang="ko">
<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">
  <script defer src="main.js"></script>
</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>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(161, 100, 223);
  font-family: 'Poppins', 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: #663399;
  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: .9;
}

.btn:focus {
  outline: none;
}

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;
  })
}

728x90

LIST