JS 오디오·비디오 제어 완전 정리

 

 

HTMLMediaElement

JS 오디오·비디오 제어 완전 정리

play, pause, replay, volume, muted, ended, loadedmetadata를 오디오/비디오 제어 흐름으로 정리합니다.

0 오늘 분석할 코드

<audio id="audio" src="media/EmbraceableYou.mp3"></audio>
<button id="play" onclick="control(event)">play</button>
<button id="pause" onclick="control(event)">pause</button>
<script>
let audio = document.getElementById("audio");
function control(e) {
  let id = e.target.id;
  if (id == "play") audio.play();
  else if (id == "pause") audio.pause();
  else if (id == "replay") { audio.load(); audio.play(); }
  else if (id == "vol-") audio.volume -= 0.1;
  else if (id == "vol+") audio.volume += 0.1;
  else if (id == "mute on/off") audio.muted = !audio.muted;
}
audio.onended = function () {
  document.body.style.backgroundColor = "yellow";
};
</script>

play()미디어 재생을 시작합니다.

pause()미디어 재생을 일시정지합니다.

load()미디어 리소스를 다시 로딩합니다.

volume0부터 1 사이의 볼륨 값입니다.

muted음소거 여부를 나타내는 boolean 속성입니다.

ended재생이 끝났을 때 발생하는 이벤트입니다.

loadedmetadata미디어의 메타데이터가 준비됐을 때 발생합니다.

videoWidth비디오 원본 너비입니다.

---

1 미디어 제어 예제의 흐름

오디오 제어 예제는 버튼 id를 읽어서 audio 요소의 메서드와 속성을 바꾸는 구조입니다. ended 이벤트 예제와 비디오 원본 크기 예제까지 합치면 HTMLMediaElement의 기본 제어 흐름을 볼 수 있습니다.

• play 버튼은 audio.play()를 호출합니다.
• pause 버튼은 audio.pause()를 호출합니다.
• replay 버튼은 load 후 play를 호출합니다.
• volume 버튼은 audio.volume 값을 조절합니다.
• mute 버튼은 audio.muted 값을 토글합니다.

---

2 버튼 id로 분기하기

control(event)는 클릭된 버튼의 id를 e.target.id로 읽습니다. 하나의 함수에서 여러 버튼을 처리할 수 있지만, id 문자열이 정확히 일치해야 합니다.

function control(e) {
  let id = e.target.id;
  if (id == "play") audio.play();
  else if (id == "pause") audio.pause();
}

---

3 play와 pause

play는 재생을 시작하고 pause는 현재 위치에서 멈춥니다. 최신 브라우저는 사용자 조작 없이 자동 play를 막는 경우가 많으므로 버튼 클릭 안에서 호출하는 구조가 안정적입니다.

메서드	역할	상태
play()	재생 시작	paused가 false로 바뀜
pause()	일시정지	paused가 true로 바뀜
load()	미디어 다시 로딩	처음 상태로 되돌림
currentTime = 0	재생 위치 초기화	처음부터 재생 준비

---

 

반응형

 

4 replay 처리

원문은 replay에서 audio.load() 후 audio.play()를 호출합니다. src를 다시 로드하고 처음부터 재생하는 방식입니다. 단순히 처음으로 되감고 싶다면 currentTime = 0을 사용할 수도 있습니다.

• load는 미디어 리소스를 다시 로딩합니다.
• currentTime은 현재 재생 위치를 초 단위로 나타냅니다.
• load 후 play는 네트워크 상태에 영향을 받을 수 있습니다.
• 같은 파일을 다시 듣는 용도라면 currentTime 방식이 더 가볍습니다.

---

5 volume 값 조절

audio.volume은 0부터 1 사이의 숫자입니다. 원문 예제는 0.1씩 더하고 빼며, 범위를 벗어나면 0 또는 1로 보정합니다.

값	의미	처리
0	무음	최소값
0.5	절반 정도의 볼륨	중간값
1	최대 볼륨	최대값
1 초과	허용 범위 밖	1로 보정

---

6 muted 토글

audio.muted = !audio.muted는 현재 음소거 상태를 반대로 바꿉니다. volume 값은 그대로 두고 출력만 막는다는 점이 volume = 0과 다릅니다.

음소거 해제 후 이전 볼륨으로 돌아가게 하려면 volume을 0으로 바꾸는 것보다 muted 속성을 쓰는 편이 자연스럽습니다.

---

7 ended 이벤트

ended 이벤트는 오디오 재생이 끝났을 때 발생합니다. 원문 예제는 audio.onended에 함수를 넣어 body 배경색을 노란색으로 바꿉니다.

audio.onended = function () {
  document.body.style.backgroundColor = "yellow";
};

퀴즈, 효과음, 재생 목록 같은 기능에서 다음 동작을 이어 붙일 때 자주 사용합니다.

---

8 비디오 원본 크기

videoWidth와 videoHeight는 실제 비디오 파일의 원본 너비와 높이입니다. metadata가 로드된 뒤에만 값을 안정적으로 읽을 수 있으므로 onloadedmetadata에서 처리합니다.

1. video 태그를 width="0" height="0"으로 시작합니다.
2. metadata가 로드되면 onloadedmetadata가 실행됩니다.
3. video.videoWidth와 video.videoHeight를 읽습니다.
4. video.width와 video.height에 대입합니다.

---

9 메시지 출력

원문은 div.innerHTML에 현재 동작 메시지를 출력합니다. 사용자에게 재생, 일시정지, 볼륨 변경, 음소거 상태를 알려 주는 간단한 상태 표시 영역입니다.

• 오디오 src를 보여 주면 어떤 파일이 재생되는지 알 수 있습니다.
• volume 값을 표시하면 조절 결과가 명확합니다.
• muted 상태를 텍스트로 알려 주면 버튼 상태를 보완할 수 있습니다.
• 반복되는 메시지는 별도 함수로 분리할 수 있습니다.

---

10 HTML id 주의

원문에는 id="mute on/off"처럼 공백과 특수 문자가 들어간 id가 있습니다. 동작은 가능할 수 있지만 CSS 선택자나 코드 관리에서 불편하므로 muteToggle 같은 이름이 더 낫습니다.

기존	권장	이유
mute on/off	muteToggle	공백 없는 식별자가 다루기 쉽습니다.
vol-	volumeDown	의미가 분명합니다.
vol+	volumeUp	CSS 선택자 사용이 편합니다.
msg	statusMessage	역할이 더 명확합니다.

---

11 개선 과제

과제	목표
볼륨 슬라이더	input range 값을 volume에 연결합니다.
재생 위치 표시	timeupdate 이벤트로 currentTime을 출력합니다.
진행바	duration 대비 currentTime 비율을 표시합니다.
비디오 크기 버튼	원본, 절반, 전체 폭 보기 기능을 추가합니다.
이벤트 로그	play, pause, ended 이벤트를 기록합니다.

---

12 검증 체크리스트

• audio와 video id가 스크립트의 getElementById와 일치합니다.
• play는 사용자 클릭 안에서 호출합니다.
• volume은 0 이상 1 이하로 보정합니다.
• ended 이벤트는 재생 완료 후 실행되는지 확인합니다.
• videoWidth와 videoHeight는 loadedmetadata 이후 읽습니다.
• 미디어 파일 경로와 type을 실제 파일에 맞춥니다.

---

13 실전 점검 순서

1. 요소 확인: audio, video, msg 요소가 실제 DOM에 있는지 확인합니다.
2. 파일 확인: mp3와 mp4 경로가 현재 HTML 위치 기준으로 맞는지 봅니다.
3. 클릭 확인: 버튼 id와 control 함수의 분기 문자열이 같은지 확인합니다.
4. 범위 확인: volume 변경 후 0과 1 사이로 제한되는지 봅니다.
5. 이벤트 확인: ended와 loadedmetadata가 실제 재생 흐름에서 발생하는지 확인합니다.

미디어 제어 문제는 코드보다 파일 경로와 브라우저 자동 재생 정책에서 먼저 발생하는 경우가 많습니다.

• 콘솔에 play() Promise 오류가 보이면 사용자 제스처 안에서 호출되는지 확인합니다.
• 재생은 되는데 소리가 없으면 muted, volume, 운영체제 볼륨을 함께 확인합니다.

---

M 자주 하는 실수

실수	문제	해결
play를 자동 실행하려 함	브라우저 자동 재생 정책에 막힐 수 있습니다.	사용자 클릭 이벤트 안에서 play를 호출합니다.
volume 범위 보정 누락	0 미만 또는 1 초과 값이 될 수 있습니다.	값을 바꾼 뒤 0과 1로 제한합니다.
loadedmetadata 전에 videoWidth 읽기	원본 크기가 아직 준비되지 않았습니다.	onloadedmetadata 안에서 읽습니다.
id에 공백 사용	선택자와 유지보수가 불편합니다.	공백 없는 id로 바꿉니다.
ended 이벤트를 함수 호출처럼 씀	이벤트 등록이 되지 않습니다.	audio.onended = function 형태로 등록합니다.

핵심 한 줄 요약

audio오디오는 play, pause, load, volume, muted를 조합해 제어합니다.

eventended와 loadedmetadata는 미디어 상태 변화 후 실행할 코드를 붙이는 지점입니다.

video원본 비디오 크기는 metadata가 로드된 뒤 videoWidth와 videoHeight로 읽습니다.

Tags

#JavaScript#audio#video#play#pause#volume#muted#ended#loadedmetadata#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, audio, video, play, pause, volume, muted, ended, loadedmetadata, 티스토리