HTML DOM의 Audio 객체는 HTML <audio> 요소를 나타내는 인터페이스입니다. <audio> 요소는 HTML5에서 새롭게 도입된 기능으로, 이 객체를 활용하면 오디오 트랙 정보를 가져오거나 자동 재생(autoplay) 설정을 변경하는 등 다양한 작업을 수행할 수 있습니다.
주요 속성(Properties)
HTML DOM Audio 객체가 제공하는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| audioTracks | 사용 가능한 오디오 트랙 목록을 담고 있는 audioTrackList 객체를 반환합니다. |
| autoplay | 오디오가 자동으로 재생되도록 설정하거나 해당 설정 여부를 반환합니다. |
| buffered | 오디오에서 버퍼링된 구간 전체를 포함하는 TimeRanges 객체를 반환합니다. |
| controller | 오디오의 현재 미디어 컨트롤러를 나타내는 MediaController 객체를 반환합니다. |
| controls | 재생/일시정지 컨트롤 UI를 표시할지 여부를 설정하거나 반환합니다. |
| crossOrigin | 오디오의 CORS(Cross-Origin Resource Sharing) 설정을 지정하거나 반환합니다. |
| currentSrc | 현재 재생 중인 오디오의 URL을 반환합니다. |
| currentTime | 현재 재생 위치(초 단위)를 설정하거나 반환합니다. |
| defaultMuted | 오디오가 기본적으로 음소거 상태인지 여부를 설정하거나 반환합니다. |
| defaultPlaybackRate | 오디오의 기본 재생 속도를 설정하거나 반환합니다. |
| duration | 오디오의 전체 길이를 초 단위로 반환합니다. |
| ended | 재생이 종료되었는지 여부를 반환합니다. |
| error | 오디오의 오류 상태를 나타내는 MediaError 객체를 반환합니다. |
| loop | 재생이 끝난 후 오디오를 다시 반복 재생할지 여부를 설정하거나 반환합니다. |
| mediaGroup | 오디오가 속한 미디어 그룹 이름을 설정하거나 반환합니다. |
| muted | 오디오를 음소거할지 여부를 설정하거나 반환합니다. |
| networkState | 오디오의 현재 네트워크 상태를 반환합니다. |
| paused | 오디오가 일시정지 상태인지 여부를 설정하거나 반환합니다. |
| playbackRate | 오디오의 재생 속도를 설정하거나 반환합니다. |
| played | 이미 재생된 구간을 나타내는 TimeRanges 객체를 반환합니다. |
| preload | 오디오의 preload 속성값을 설정하거나 반환합니다. |
| readyState | 오디오의 현재 준비 상태(ready state)를 반환합니다. |
| seekable | 탐색(seek)이 가능한 구간을 나타내는 TimeRanges 객체를 반환합니다. |
| seeking | 사용자가 현재 오디오 내에서 탐색 중인지 여부를 반환합니다. |
| src | 오디오의 src 속성값을 설정하거나 반환합니다. |
| textTracks | 사용 가능한 모든 텍스트 트랙을 나타내는 TextTrackList 객체를 반환합니다. |
| volume | 오디오의 볼륨을 설정하거나 반환합니다. |
주요 메서드(Methods)
Audio 객체에서 사용할 수 있는 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| addTextTrack() | 해당 오디오에 새로운 텍스트 트랙을 추가합니다. |
| canPlayType() | 브라우저가 지정된 오디오 형식을 재생할 수 있는지 확인합니다. |
| fastSeek() | 오디오 플레이어에서 지정된 시간으로 빠르게 탐색합니다. |
| getStartDate() | 현재 타임라인 오프셋을 나타내는 새 Date 객체를 반환합니다. |
| load() | 오디오 요소를 다시 로드합니다. |
| play() | 오디오 재생을 시작합니다. |
| pause() | 현재 재생 중인 오디오를 일시정지합니다. |
기본 문법(Syntax)
Audio 객체의 기본적인 사용 문법은 다음과 같습니다.
오디오 요소 생성하기
var x = document.createElement("AUDIO")기존 오디오 요소 접근하기
var x = document.getElementById("demoAudio")실전 예제
Audio 객체의 실제 활용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>
<p>버튼을 클릭하면 오디오 길이(초 단위)를 확인할 수 있습니다.</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
function AudioDur() {
var x = document.getElementById("Audio").duration;
document.getElementById("SAMPLE").innerHTML = x;
}
function CreateAudio() {
var x = document.createElement("AUDIO");
x.setAttribute("src","sample1.mp3");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
[Duration] 버튼 클릭 시
[CREATE] 버튼 클릭 시
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
1. 오디오 요소 생성
먼저 오디오 요소를 생성하고 오디오 소스와 형식을 지정했습니다. 브라우저가 오디오를 지원하지 않을 경우 대체 텍스트가 표시됩니다.
<audio id="Audio" controls> <source src="sample.mp3" type="audio/mpeg"> Audio not supported in your browser </audio>
2. 버튼 생성
그다음 각각 AudioDur() 함수와 CreateAudio() 함수를 실행하는 두 개의 버튼인 "Duration"과 "CREATE"를 만들었습니다.
<button onclick="AudioDur()">Duration</button> <button onclick="CreateAudio()">CREATE</button>
3. AudioDur() 함수 동작
AudioDur() 함수는 id가 "Audio"인 요소에 접근하여 <audio> 요소를 가져온 뒤, duration 속성을 통해 오디오의 전체 길이를 구합니다. 구해진 값은 id가 "SAMPLE"인 단락(<p>)에 표시됩니다.
function AudioDur() {
var x = document.getElementById("Audio").duration;
document.getElementById("SAMPLE").innerHTML = x;
}4. CreateAudio() 함수 동작
CreateAudio() 함수는 새로운 오디오 요소를 동적으로 생성하고, src 속성을 "sample1.mp3"로 지정한 후 controls 속성을 설정하여 컨트롤 UI를 활성화합니다. 마지막으로 appendChild() 메서드를 사용해 해당 요소를 문서의 body에 추가합니다.
function CreateAudio() {
var x = document.createElement("AUDIO");
x.setAttribute("src","sample1.mp3");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
}이처럼 HTML DOM Audio 객체를 활용하면 웹 페이지에서 오디오를 동적으로 제어하고, 재생 위치·볼륨·속도 등 다양한 속성을 자유롭게 조작할 수 있습니다.