[책] 자바스크립트 코드 레시피 278 - 177일차

스크립트로 사운드 제어하기

• 스크립트로 사운드 재생 상태를 관리하고 싶을 때

구문

audio 요소의 paly() 와 pause() 를 사용해 사운드를 재생하거나 정지할 수 있습니다.

play();
pause();

실습

index.html

<div>
  <audio id="myAudio" src="music.mp3" controls></audio>
</div>
<div>
  <button id="btnPaly">재생</button>
  <button id="btnPause">정지</button>
</div>

---

script.js

const myAudio = document.querySelector('#myAudio');
const btnPaly = document.querySelector('#btnPaly');
const btnPause = document.querySelector('#btnPause');

// 사운드 길이(초 단위)
myAudio.addEventListener('loadedmetadata', () => {
  console.log(myAudio.duration);
});

// 재생
btnPaly.addEventListener('click', () => {
  myAudio.play();
});

// 정지
btnPause.addEventListener('click', () => {
  myAudio.pause();
});

사운드 재생 조절하기

• 사운드 재생 시간을 조절하고 싶을 때

구문

currentTime; // 재생 헤드 값(second). 읽기/쓰기 가능
duration; // 사운드의 길이(second). 읽기 가능

실습

audio 요소의 currentTime 속성을 사용해 현재 재생 위치(초 단위) 확인이나 설정이 가능하며, 스크립트로 스킵 기능을 사용할 때도 유용합니다. 사운드의 길이duration보다 작은 값을 설정하지 않도록 주의합니다.
script.js

const myAudio = document.querySelector('#myAudio');
console.log(myAudio.currentTime = 59.048);

---

duration 속성은 사운드의 길이를 확인할 수 있습니다. 사운드 데이터의 메타 정보를 모두 가져오기 전까지는 길이를 확인할 수 없으므로 loadedmetadata 이벤트 사용이 필요합니다. 해당 이벤트 발생 확인 후 duration 속성으로 사운드 데이터의 길이를 확인할 수 있습니다.
script.js

const myAudio = document.querySelector('#myAudio');
// 사운드 길이(초 단위)
myAudio.addEventListener('loadedmetadata', () => {
  console.log(myAudio.duration);
});

사운드 볼륨 조절하기

• 스크립트로 사운드의 볼륨을 조절하고 싶을 때
• 음소거 기능을 사용하고 싶을 때

구문

volume; // 볼륨 값
muted; // 음소거 상태 여부

실습

volume 속성을 사용해 사운드의 볼륨을 확인하거나 설정을 조절할 수 있는데, 그 범위는 0.0(음소거) ~ 1.0(최대 볼륨) 내에서 설정이 가능합니다. muted 속성은 음소거 상태의 확인과 설정이 가능합니다. volume 속성은 볼륨 크기의 세세한 조절이 가능하지만, muted 속성은 음소거 기능만 작동합니다.
script.js

const myAudio = document.querySelector('#myAudio');
console.log(myAudio.volume = 0.1); // 볼륨 값 최소(음소거) 0.0 ~ 1.0(최대 볼륨)
console.log(myAudio.muted = true); // 음소거
console.log(myAudio.muted = false); // 음소거 해제