[JavaScript] 자바스크립트에서 사운드 재생 조절하기

191_자바스크립트에서 사운드 재생 조절하기

[적용]

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

---

[문법]

속성	의미	타입
currentTime	재생 헤드 값(second), 읽기/쓰기 기능	숫자
duration	사운드의 길이(second), 읽기 기능	숫자

---

[내용]

audio 요소의 currenTime 속성을 사용해 현재 재생 위치(초 단위) 확이나 설정이 가능하며,

스크립트로 스킵 기능을 사용할 때도 유용하다.

사운드의 길이(Duration) 보다 작은 값을 설정하지 않도록 주의하자.

JavaScript                                                                                                                                                          main.js

const audio = document.querySelector('#myAudio');
audio.currnetTime = 1.0;

 

duration 속성은 사운드의 길이를 확인할 수 있다.

사운드 데이터의 메타 정보를 모두 가져오기 전까지는 길이를 확인할 수 없으므로 loadedmetadata 이벤트 사용이 필요하다.

해당 이벤트 발생 확인 후 duration 속성으로 사운드 데이터의 길이를 확인할 수 있다.

JavaScript                                                                                                                                                          main.js

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

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김