HTML DOM Source 객체 – 생성 및 접근 방법 완벽 가이드

HTML DOM Source 객체란?

HTML DOM의 Source 객체는 HTML <source> 요소와 연결된 객체입니다. <source> 요소는 <audio>, <video> 같은 미디어 요소에 여러 개의 미디어 리소스를 지정할 때 사용되며, 브라우저는 지원 가능한 첫 번째 소스를 자동으로 선택해 재생합니다.

JavaScript에서는 createElement() 메서드를 사용해 새로운 source 요소를 동적으로 생성할 수 있고, getElementById() 메서드를 사용해 문서 내 기존 요소에 접근할 수 있습니다.

문법(Syntax)

Source 객체를 생성하는 기본 문법은 다음과 같습니다.

var p = document.createElement("SOURCE");

예제(Example)

아래 예제는 버튼을 클릭하면 오디오 요소에 새로운 소스를 동적으로 추가하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<body>
<h1>Source 객체 예제</h1>
<audio id="AUDIO_1" controls>
</audio>
<p>아래 버튼을 클릭하여 위 오디오 요소에 소스를 추가해 보세요.</p>
<button onclick="createSrc()">CREATE</button>
<p id="Sample"></p>
<script>
    function createSrc() {
        var s = document.createElement("SOURCE");
        s.setAttribute("src", "sample.mp3");
        s.setAttribute("type", "audio/mpeg");
        document.getElementById("AUDIO_1").appendChild(s);
        document.getElementById("Sample").innerHTML = "이제 오디오 컨트롤이 정상적으로 작동합니다.";
    }
</script>
</body>
</html>

코드 설명

createElement("SOURCE"): 새로운 <source> 요소를 생성합니다.
setAttribute(): 생성한 요소에 재생 파일 경로(src)와 미디어 타입(type) 속성을 설정합니다.
appendChild(): 생성한 source 요소를 <audio> 요소의 자식 노드로 추가합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Source 객체 – 생성 및 접근 방법 완벽 가이드

CREATE 버튼을 클릭하면,

HTML DOM Source 객체 – 생성 및 접근 방법 완벽 가이드

버튼을 클릭하는 순간 createSrc() 함수가 실행되어 sample.mp3 파일이 오디오 요소의 소스로 지정되고, 오디오 컨트롤이 정상적으로 작동하게 됩니다.