오디오파일들

html

    <audio id="박수" src="sounds/박수.mp3"></audio>
    <audio id="부우" src="sounds/부우.mp3"></audio>
    <audio id="한숨" src="sounds/한숨.mp3"></audio>
    <audio id="타다" src="sounds/타다.mp3"></audio>
    <audio id="승리" src="sounds/승리.mp3"></audio>
    <audio id="틀림" src="sounds/틀림.mp3"></audio>

    <div id="buttons"></div>

js

// 각각의 사운드 이름으로 버튼 태그를 생성
sounds.forEach((sound) => {
  const btn = document.createElement('button');
  btn.classList.add('btn');

  btn.textContent = sound; //사운드 이름을 태그 컨텐트(내용)으로 저장

  document.getElementById('buttons').appendChild(btn);
});

css

@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: rebeccapurple;
  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;
}

클릭하면 오디오 플레이

모든 버튼에 이벤트 리스너 붙이기

  btn.addEventListener('click', () => { 
  
    document.getElementById(sound).play();
  });

연속적으로 오디오 플레이=> 중복됨

모든 오디오 멈추기(stop)

https://stackoverflow.com/questions/14834520/html5-audio-stop-function

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

    song.pause();
    song.currentTime = 0;
  });
}

stopSongs(); 의 위치는?

버튼 클릭시!