JavaScript 오디오와 비디오 API: 웹에서 미디어 다루기 🎵🎬
안녕하세요, 여러분! 오늘은 JavaScript의 초쿨한 기능 중 하나인 오디오와 비디오 API에 대해 알아볼 거예요. 이 기능들을 마스터하면 여러분도 웹에서 미디어를 다루는 진정한 프로 개발자가 될 수 있답니다! 😎 재능넷에서도 이런 스킬을 가진 개발자들의 수요가 엄청나죠. 그럼 지금부터 시작해볼까요? 레츠고~! 🚀
1. JavaScript 오디오 API: 소리의 세계로 빠져볼까요? 🎧
JavaScript 오디오 API는 웹 페이지에서 소리를 재생하고 조작할 수 있게 해주는 강력한 도구예요. 음악 플레이어부터 게임 효과음까지, 이 API로 할 수 있는 건 정말 무궁무진하답니다!
1.1 Audio 객체 생성하기
먼저, Audio 객체를 만들어볼까요? 이게 바로 모든 것의 시작이에요!
const myAudio = new Audio('awesome_song.mp3');
이렇게 하면 'awesome_song.mp3'라는 파일을 재생할 준비가 된 Audio 객체가 생성돼요. 쉽죠? ㅋㅋㅋ
1.2 오디오 재생하기
자, 이제 우리가 만든 오디오를 재생해볼 차례예요!
myAudio.play();
와우! 이 한 줄로 음악이 재생되기 시작했어요. 너무 쉽지 않나요? 😆
1.3 오디오 일시정지와 정지
음악을 멈추고 싶을 때는 어떻게 할까요? 두 가지 방법이 있어요.
// 일시정지
myAudio.pause();
// 완전 정지 (처음으로 돌아가기)
myAudio.pause();
myAudio.currentTime = 0;
일시정지는 현재 위치에서 멈추고, 완전 정지는 처음으로 돌아가는 거예요. 상황에 따라 적절히 사용하면 되겠죠?
1.4 볼륨 조절하기
볼륨 조절도 할 수 있어요. 귀가 아플 정도로 크게 들을 수도 있고, 속삭이는 소리처럼 작게 들을 수도 있죠.
// 볼륨 설정 (0.0 ~ 1.0 사이의 값)
myAudio.volume = 0.5; // 50% 볼륨
// 볼륨 높이기
myAudio.volume += 0.1;
// 볼륨 낮추기
myAudio.volume -= 0.1;
볼륨 값은 0.0(무음)부터 1.0(최대 볼륨) 사이의 값을 가져요. 0.5는 딱 중간 볼륨이죠!
1.5 재생 속도 조절하기
음악을 빠르게 또는 느리게 재생하고 싶나요? 그것도 가능해요!
// 재생 속도 설정
myAudio.playbackRate = 1.5; // 1.5배 빠르게
myAudio.playbackRate = 0.5; // 0.5배 느리게
1.0이 기본 속도예요. 2.0은 두 배 빠르게, 0.5는 절반 속도로 재생되는 거죠. 치파오 노래를 들으면서 속도 조절해보면 재밌을 것 같지 않나요? ㅋㅋㅋ
1.6 반복 재생 설정하기
좋아하는 노래를 계속 반복해서 듣고 싶다구요? 그것도 문제없어요!
myAudio.loop = true; // 반복 재생 켜기
myAudio.loop = false; // 반복 재생 끄기
이렇게 하면 노래가 끝나도 자동으로 다시 시작돼요. 무한 반복! 🔁
1.7 오디오 이벤트 다루기
오디오 재생 중에 특정 시점에서 뭔가를 하고 싶다면 이벤트를 사용하면 돼요.
myAudio.addEventListener('play', () => {
console.log('음악이 시작됐어요! 🎉');
});
myAudio.addEventListener('pause', () => {
console.log('음악이 일시정지됐어요. ⏸');
});
myAudio.addEventListener('ended', () => {
console.log('음악이 끝났어요. 다음 곡 어떠세요? 🎵');
});
이벤트를 활용하면 음악 플레이어의 UI를 업데이트하거나, 다음 곡을 자동으로 재생하는 등 다양한 기능을 구현할 수 있어요.
1.8 오디오 시간 다루기
현재 재생 시간을 알고 싶거나, 특정 시점으로 이동하고 싶을 때는 이렇게 해요.
// 현재 재생 시간 얻기
console.log(myAudio.currentTime);
// 특정 시간으로 이동 (초 단위)
myAudio.currentTime = 30; // 30초 지점으로 이동
이 기능을 이용하면 음악의 하이라이트 부분으로 바로 이동할 수 있어요. 신나는 부분만 계속 들을 수 있다구요! 👍
1.9 오디오 메타데이터 활용하기
음악 파일에는 제목, 아티스트, 앨범 정보 등의 메타데이터가 포함되어 있을 수 있어요. 이런 정보를 가져와 보여줄 수 있답니다.
myAudio.addEventListener('loadedmetadata', () => {
console.log('제목:', myAudio.title);
console.log('아티스트:', myAudio.artist);
console.log('앨범:', myAudio.album);
console.log('총 재생 시간:', myAudio.duration);
});
이렇게 하면 음악의 상세 정보를 사용자에게 보여줄 수 있어요. 멋진 음악 플레이어를 만들 때 꼭 필요한 기능이죠!
1.10 여러 개의 오디오 동시에 다루기
게임을 만든다면 배경음악과 효과음을 동시에 재생해야 할 수도 있어요. 이럴 때는 여러 개의 Audio 객체를 만들어 사용하면 돼요.
const backgroundMusic = new Audio('background.mp3');
const jumpSound = new Audio('jump.mp3');
const coinSound = new Audio('coin.mp3');
backgroundMusic.loop = true;
backgroundMusic.play();
// 점프할 때
jumpSound.play();
// 코인 먹었을 때
coinSound.play();
이렇게 하면 배경음악은 계속 재생되면서 효과음을 원하는 타이밍에 재생할 수 있어요. 완전 프로 개발자 느낌 나죠? 😎
2. JavaScript 비디오 API: 영상의 마법사가 되어볼까요? 🎥
이제 비디오 API로 넘어가볼게요. 오디오랑 비슷한 점도 있지만, 영상이다 보니 좀 더 복잡하고 재미있는 기능들이 많답니다!
2.1 비디오 객체 생성하기
비디오 객체는 HTML에서 <video> 태그를 사용하거나 JavaScript에서 직접 생성할 수 있어요.
// HTML에서
<video id="myVideo" src="awesome_video.mp4"></video>
// JavaScript에서
const myVideo = document.getElementById('myVideo');
// 또는 JavaScript에서 직접 생성
const myVideo = document.createElement('video');
myVideo.src = 'awesome_video.mp4';
document.body.appendChild(myVideo);
이렇게 하면 비디오를 재생할 준비가 된 거예요. 쉽죠? ㅋㅋㅋ
2.2 비디오 재생 제어하기
비디오 재생, 일시정지, 정지는 오디오와 거의 똑같아요.
// 재생
myVideo.play();
// 일시정지
myVideo.pause();
// 정지 (처음으로 돌아가기)
myVideo.pause();
myVideo.currentTime = 0;
이 기본적인 컨트롤만 있어도 간단한 비디오 플레이어를 만들 수 있어요. 재능넷에서 이런 스킬을 가진 개발자를 찾는 사람들이 많더라구요!
2.3 비디오 볼륨과 음소거
볼륨 조절은 오디오와 동일해요. 하지만 비디오에는 음소거 기능이 추가로 있답니다.
// 볼륨 조절
myVideo.volume = 0.7; // 70% 볼륨
// 음소거 켜기/끄기
myVideo.muted = true; // 음소거 켜기
myVideo.muted = false; // 음소거 끄기
음소거 기능은 광고 영상이나 자동 재생 비디오에서 많이 사용돼요. 사용자 경험을 위해 중요한 기능이죠!
2.4 비디오 크기 조절하기
비디오의 크기를 조절하고 싶다면 width와 height 속성을 사용하면 돼요.
myVideo.width = 640;
myVideo.height = 360;
이렇게 하면 비디오 크기가 640x360 픽셀로 변경돼요. 반응형 웹을 만들 때는 CSS를 사용해서 더 유연하게 조절할 수 있답니다.
2.5 전체 화면 모드
영화관처럼 비디오를 전체 화면으로 보고 싶다면? 그것도 가능해요!
// 전체 화면으로 전환
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
} else if (myVideo.mozRequestFullScreen) { // Firefox
myVideo.mozRequestFullScreen();
} else if (myVideo.webkitRequestFullscreen) { // Chrome, Safari, Opera
myVideo.webkitRequestFullscreen();
} else if (myVideo.msRequestFullscreen) { // IE/Edge
myVideo.msRequestFullscreen();
}
// 전체 화면 해제
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
브라우저마다 조금씩 다른 메서드를 사용해야 해서 좀 복잡해 보이지만, 이렇게 하면 모든 주요 브라우저에서 전체 화면 모드가 잘 작동한답니다. 😊
2.6 비디오 시간 다루기
비디오의 현재 재생 시간, 총 재생 시간 등을 다루는 방법도 알아볼까요?
// 현재 재생 시간 얻기
console.log(myVideo.currentTime);
// 특정 시간으로 이동
myVideo.currentTime = 120; // 2분(120초) 지점으로 이동
// 총 재생 시간 얻기
console.log(myVideo.duration);
// 남은 재생 시간 계산하기
const remainingTime = myVideo.duration - myVideo.currentTime;
console.log('남은 시간:', remainingTime, '초');
이런 기능들을 이용하면 "5분 뒤로 가기", "10초 앞으로 가기" 같은 편리한 기능을 구현할 수 있어요. 넷플릭스 같은 거 만들 수 있겠죠? ㅋㅋㅋ
2.7 비디오 재생 속도 조절하기
비디오도 오디오처럼 재생 속도를 조절할 수 있어요. 2배속으로 강의 듣기, 0.5배속으로 댄스 동작 따라하기 등 다양하게 활용할 수 있죠.
// 재생 속도 설정
myVideo.playbackRate = 2.0; // 2배속
myVideo.playbackRate = 0.5; // 0.5배속
myVideo.playbackRate = 1.0; // 기본 속도로 복귀
재생 속도를 바꿔도 음성의 피치는 변하지 않아요. 그래서 2배속으로 들어도 알아들을 수 있는 거죠. 신기하지 않나요? 😮
2.8 비디오 이벤트 활용하기
비디오에도 다양한 이벤트가 있어요. 이를 활용하면 더욱 인터랙티브한 비디오 플레이어를 만들 수 있답니다.
myVideo.addEventListener('play', () => {
console.log('비디오 재생 시작! 🎬');
});
myVideo.addEventListener('pause', () => {
console.log('비디오 일시정지 ⏸');
});
myVideo.addEventListener('ended', () => {
console.log('비디오 재생 끝! 👏');
});
myVideo.addEventListener('timeupdate', () => {
console.log('현재 재생 시간:', myVideo.currentTime);
});
myVideo.addEventListener('volumechange', () => {
console.log('볼륨이 변경됐어요:', myVideo.volume);
});
'timeupdate' 이벤트는 재생 중 주기적으로 발생해서 현재 재생 시간을 계속 업데이트할 수 있어요. 이걸로 진행 바를 만들 수 있겠죠?
2.9 비디오 트랙 다루기
비디오에는 여러 개의 오디오 트랙이나 자막 트랙이 포함될 수 있어요. 이런 트랙들을 JavaScript로 제어할 수 있답니다.
// 오디오 트랙 가져오기
const audioTracks = myVideo.audioTracks;
// 자막 트랙 가져오기
const textTracks = myVideo.textTracks;
// 특정 오디오 트랙 활성화하기
if (audioTracks.length > 1) {
audioTracks[0].enabled = false;
audioTracks[1].enabled = true;
}
// 자막 켜기/끄기
if (textTracks.length > 0) {
textTracks[0].mode = 'showing'; // 자막 켜기
// textTracks[0].mode = 'hidden'; // 자막 끄기
}
이렇게 하면 다국어 지원이나 청각 장애인을 위한 자막 기능을 구현할 수 있어요. 완전 프로페셔널하죠? 😎
2.10 캔버스와 비디오 합치기
비디오 API와 Canvas API를 함께 사용하면 정말 멋진 효과를 만들 수 있어요. 예를 들어, 비디오에 실시간으로 필터를 적용하거나 비디오 위에 그림을 그릴 수 있답니다.
const video = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
video.addEventListener('play', function() {
function draw() {
if (video.paused || video.ended) return;
// 비디오의 현재 프레임을 캔버스에 그리기
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 여기에 필터나 효과를 추가할 수 있어요
// 예: 흑백 필터
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.putImageData(imageData, 0, 0);
requestAnimationFrame(draw);
}
draw();
});
이 코드는 비디오를 캔버스에 그리고, 실시간으로 흑백 필터를 적용하는 예제예요. 이런 식으로 다양한 효과를 만들 수 있답니다. 인스타그램 필터 같은 거 만들 수 있겠죠? ㅋㅋㅋ
