[Javascript] 마우스 휠로 비디오의 음량을 조절하기 - 1편

안녕하세요.

오늘은 웹사이트에서 재생 중인 비디오의 음량을 조절할 때 마우스 휠을 통해 조정하는 방법을 작업해보려고 합니다.

 

1. 들어가며

데스크탑의 동영상 플레이어에서는 마우스 휠을 통해 볼륨을 조절하는 기능을 기본적으로 제공을 하고 있습니다. 개인적으로 마우스를 클릭해서 조절하거나 드래그를 통해 볼륨바를 조절하는 것보다 오히려 섬세하게 조절할 수 있다고 생각해 애용하는 기능 중 하나였습니다. 이 기능을 스트리밍 사이트(치지직)에 적용을 해보았고 고민하는 과정과 개발, 디버깅 등 작업했던 기록을 공유하고자 합니다. 

2. 기능의 설계 및 중요 기능 테스트

2.1. 어떤 것을 조작해야 볼륨이 줄어들까?

<video>의 controls 속성에는 기본적으로 컨트롤러를 제공합니다.

소리 조절(volume)
동영상 탐색(seek)
일시 정지(pause)/재시작(resume)

기본적으로 제공되는 컨트롤러 중 volume 영역을 확인해 보겠습니다. 

>

document.querySelector('video').volume

1.0

현재 재생되고 있는 Video의 볼륨은 100%입니다. 

이 부분을 조절하면 현재 재생중인 볼륨이 줄어드는 것을 확인했습니다. 

 

볼륨의 100%는 1.0 이고 0%는 0.0입니다

2.2. 마우스 휠 이벤트를 통해 값을 조절해 보자

먼저 Event가 동작할 때, 어떠한 값이 변경되는지 확인하기 위해 Console.log를 찍어보았습니다. 

 

 

실제 Console.log를 확인하면 굉장히 많은 양의 정보가 빠르게 표시됩니다. 원하는 정보만 출력하게 하는 것이 더 좋습니다. 설명을 위해 저는 아래와 같이 작성하였습니다.

>

window.addEventListener("wheel", event => console.log(event));

isTrusted: true
altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 543
clientY: 240
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: (...)
deltaMode: 0
deltaX: -0
deltaY: -250
deltaZ: 0
detail: 0
eventPhase: 0
fromElement: null
layerX: 543
layerY: 168
metaKey: false
movementX: 0
movementY: 0
offsetX: 543
offsetY: 122
pageX: 543
pageY: 240
relatedTarget: null
returnValue: (...)
screenX: 585
screenY: 342
shiftKey: false
sourceCapabilities: null
srcElement: div.kakao-editor
target: div.kakao-editor
timeStamp: 1703871.9
toElement: div.kakao-editor
type: "wheel"
view: Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …}
wheelDelta: 300
wheelDeltaX: 0
wheelDeltaY: 300
which: 0
x: 543
y: 240

마우스 휠을 조작해 보면 EventListener를 통해 여러 가지 값을 확인할 수 있는데 많은 내용들이 있지만, 마우스 휠을 조작해 보면서 값을 비교해 보면 마우스의 DeltaY값이 변경되는 것을 확인할 수 있습니다.

 

휠을 아래로 조작하면 양수(+) 값이 나오고 위로 조작하면 음수(-) 값이 출력됩니다.

마우스 휠 조작에 대한 정보를 확인하여 양수인지 음수인지 확인을 하면 되겠다는 생각이 들게 됩니다.

2.3. 중요 함수 구현 - handleVolumeChange

function handleVolumeChange(event, video) { 
	// 기본 스크롤 동작 방지
	event.preventDefault(); 
	// 볼륨 변경 (0.05 단위로)
	const volumeChange = 0.05;
	// 휠 방향 확인 (위: 음수, 아래: 양수)
	if (event.deltaY < 0) {
		// 볼륨 증가
		video.volume = Math.min(1, video.volume + volumeChange);
	} else {
		// 볼륨 감소
		video.volume = Math.max(0, video.volume - volumeChange);
	}
	console.log("Current volume:", video.volume.toFixed(2));
}

2.4. 결과확인

Current volume: 0.15
Current volume: 0.10
Current volume: 0.05
Current volume: 0.00
Current volume: 0.05
Current volume: 0.10
Current volume: 0.15
Current volume: 0.20

볼륨도 잘 조절되는 것을 확인할 수 있었습니다.

3. 실제 이벤트와의 연동

해당 기능을 매번 페이지에서 비디오를 실행할 때마다 복사, 붙여 넣기를 하며 실행하기에는 너무 귀찮은 일입니다. 이 행동을 개발자답게 자동으로 적용될 수 있게 처리해 볼 예정입니다.

 

확인한 내용은 아래와 같다
1. 현재 재생되는 페이지에서 보이는 Video Element는 단 1개이다
2. Video Element에 앞서 구현한 handleVolumeChange는 잘 동작한다
3. 실제 재생 될 Video가 Load가 완료되지 않아도 Event를 걸 수 있다.

3.1. Video Element를 찾아 Event를 연결

function addVolumeControl(video) {
    video.addEventListener('wheel', (event) => handleVolumeChange(event, video), { passive: false });
    console.log('Volume control added to video element');
}

const nowPlayingVideo = document.querySelector('video')
addVolumeControl(nowPlayingVideo)

addVolumeControl 함수를 통해 현재 화면에 보여지는 Video Element에 Wheel 이벤트를 동작시켰습니다. 실제 구동을 테스트를 해보니 동작은 잘 되는 것을 확인됐지만, 원하는 건 자동입니다. 이 부분이 해결이 되지 않았습니다.

3.2. '자동'으로 연결해 줘

window.addEventListener("load", () => {
	const nowPlayingVideo = document.querySelector('video')
	addVolumeControl(nowPlayingVideo)
});

위처럼 페이지가 "load"될 때 해당 함수를 실행시켜 보았더니 원하는 데로 "자동"으로 잘 작동됩니다.

4. 마치며

조금 부족하지만 기능이 동작이 되는 것을 확인했습니다. 다만 여러 가지 문제가 발생되는 것을 확인하고 수정하는 과정이 필요합니다. 다음 글에서 오류 수정, 기능 개선하는 과정을 설명하도록 하겠습니다.