오디오

개념 이해하기

audio의 controls는 재생·볼륨 UI를 제공합니다. source 요소를 여러 개 두면 MP3, OGG 등 브라우저가 지원하는 첫 형식을 사용합니다. 대화 내용은 텍스트 원고도 제공하는 것이 좋습니다.

브라우저는 두 source를 위에서부터 확인해 type이 재생 가능한 첫 파일을 불러오고, 그 파일을 정상적으로 받으면 아래의 lesson.ogg는 요청하지 않습니다. 예제의 두 파일은 실제로 없어서 재생 버튼을 눌러도 소리가 나지 않습니다. 원고는 details 안에 접혀 있어 summary인 텍스트 원고를 눌러야 문단이 펼쳐집니다.

audio에서 controls를 빼면 요소가 화면에 그려지지 않으므로, 직접 만든 재생 버튼으로 다룰 때만 생략합니다. loop는 끝난 뒤 처음부터 다시 재생하게 하고, 볼륨은 스크립트에서 volume 속성에 0부터 1 사이 값을 넣어 조절합니다.