[miniProjects] 09_Sound Board

09_Sound Board

💻 주제 : 소리 버튼을 누르면 소리가 나옴. 소리가 끝나기 전에 다른 소리 버튼을 누르면 전에 눌렀던 버튼의 소리가 중지됨.

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

• sounds라는 배열을 선언하고, 여러 오디오 파일 이름을 포함.
• sounds.forEach(sound => { ... })을 사용하여 sounds 배열의 각 요소에 대해 반복 작업을 수행.
• 반복문 내부에서는 document.createElement('button')을 사용하여 버튼 요소를 생성하고, btn.classList.add('btn')를 사용하여 'btn' 클래스를 버튼에 추가.
• btn.innerText = sound를 통해 버튼의 내용을 sound 요소로 설정. 즉, 각 버튼의 텍스트는 sounds 배열의 요소와 동일하게 된다.
• btn.addEventListener('click', () => { ... })를 사용하여 버튼에 클릭 이벤트 핸들러를 추가. 이 핸들러에서는 stopSongs() 함수를 호출하여 모든 오디오를 정지한 다음, 클릭된 버튼에 해당하는 오디오를 재생. document.getElementById(sound).play()를 사용하여 해당 오디오 요소를 찾고 재생.
• document.getElementById('buttons').appendChild(btn)를 사용하여 버튼을 HTML 문서의 'buttons'라는 요소에 추가.
• stopSongs() 함수는 모든 오디오를 정지시키는 역할. sounds.forEach(sound => { ... })를 사용하여 sounds 배열의 각 요소에 대해 반복 작업을 수행. 각 요소에 해당하는 오디오 요소를 찾은 다음, pause() 메서드를 호출하여 재생을 일시 정지하고, currentTime 속성을 0으로 설정하여 오디오를 처음으로 되감는다.