[JavaScript] 자바스크립트에서 사운드 사용하기

189_자바스크립트 사운드 사용하기

[적용]

• 시운드를 HTML 태그로 조절하고 싶을 때
• 사운드를 반복 재생하고 싶을 때
• 사운드 컨트롤 UI를 표시하고 싶을 때

---

[문법]

속성	의미	타입
src	리소스 지점	문자열
controls	컨트롤 바 표시	없음
loop	루프 지정	없음
preload	미리 불러오기	문자열

---

[내용]

audio 태그는 사운드 파일 재생 멀티미디어 관련 태그이다.

HTML 내 audio 요소를 배치하고 src 속성에 사운드 파일을 지정한다.

HTML                                                                                                                                                              index.html

<audio src="music.mp3"></audio>

 

재생이나 일시정지 등의 버튼을 사용할 수 있으며, controls를 사용하지 않으면 화면에는 버튼이 표시되지 않는다.

컨트롤 바는 브라우저에 따라 독자적인 디자인을 가진다.

HTML                                                                                                                                                              index.html

<audio src="music.mp3" controls></audio>

 

audio 요소의 사운드 반복 재생은 loop 속성을 지정한다.

HTML                                                                                                                                                              index.html

<audio src="music.mp3" controls loop></audio>

 

페이지를 표시할 때 사운드 데이터를 함께 로드하고 싶은 경우 preload 속성을 설정한다.

지정 가능한 값은 auto(미리 로드), metadata(메타 데이터만 로드), none(재생 시 로드) 등이 있다.

HTML                                                                                                                                                              index.html

<audio src="music.mp3" controls preload="none"></audio>

 

실행결과

 

---

 

 

 

 

 

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