웹 페이지에서 음악이나 동영상 같은 멀티미디어 파일을 재생하려면 HTML5의 <audio>, <video> 요소와 자바스크립트를 함께 사용하는 것이 가장 표준적인 방법입니다. 자바스크립트는 이러한 미디어 요소를 세밀하게 제어할 수 있는 play(), pause() 등의 API를 제공합니다.
1. 오디오 파일 재생하기
버튼 클릭만으로 오디오를 재생하고 일시정지하는 가장 기본적인 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Audio Player</title>
</head>
<body>
<audio id="myAudio" src="sample.mp3"></audio>
<p>아래 버튼을 눌러 오디오를 제어해 보세요.</p>
<button onclick="playAudio();">재생</button>
<button onclick="pauseAudio();">일시정지</button>
<script>
var audio = document.getElementById('myAudio');
function playAudio(){
audio.play();
}
function pauseAudio(){
audio.pause();
}
</script>
</body>
</html>
2. 비디오 파일 재생하기
비디오 역시 오디오와 동일한 방식으로 제어할 수 있습니다. <video> 요소에 id를 부여한 뒤 같은 메서드를 호출하면 됩니다.
var video = document.getElementById('myVideo');
video.play(); // 재생
video.pause(); // 일시정지
video.currentTime = 10; // 10초 지점부터 재생
3. 자주 사용하는 미디어 제어 메서드와 속성
- play() : 미디어를 재생합니다.
- pause() : 재생 중인 미디어를 일시정지합니다.
- load() : 미디어 소스를 새로 불러옵니다.
- currentTime : 현재 재생 위치(초 단위)를 읽거나 설정합니다.
- volume / muted : 음량과 음소거 여부를 제어합니다.
- duration : 전체 재생 시간을 반환합니다.
4. 알아두면 좋은 팁
브라우저 정책상 사용자 입력 없이 자동으로 소리를 내는 자동 재생(autoplay)은 차단될 수 있으므로, 버튼 클릭처럼 사용자 이벤트에 연결해 재생을 트리거하는 것이 안전합니다. 또한 브라우저마다 지원하는 코덱이 다르기 때문에 canPlayType()으로 재생 가능 여부를 미리 확인하는 것이 좋습니다.
한편 자바스크립트는 오디오·비디오뿐 아니라 이미지 같은 미디어 객체도 DOM을 통해 직접 제어할 수 있습니다. 아래 예제는 버튼을 클릭할 때마다 이미지가 오른쪽으로 10px씩 이동하는 간단한 애니메이션 코드입니다.
<img id="myImage" src="/images/html.gif" />
<p>아래 버튼을 클릭하면 이미지가 오른쪽으로 이동합니다.</p>
<input type="button" value="Click Me" onclick="moveRight();" />
<script>
var imgObj = null;
function init(){
imgObj = document.getElementById('myImage');
imgObj.style.position = 'relative';
imgObj.style.left = '0px';
}
function moveRight(){
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
</script>