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();
});

이 코드는 비디오를 캔버스에 그리고, 실시간으로 흑백 필터를 적용하는 예제예요. 이런 식으로 다양한 효과를 만들 수 있답니다. 인스타그램 필터 같은 거 만들 수 있겠죠? ㅋㅋㅋ

3. 실전 예제: 나만의 멋진 미디어 플레이어 만들기 🎨

자, 이제 우리가 배운 것들을 모두 활용해서 멋진 미디어 플레이어를 만들어볼까요? 이 예제를 통해 오디오와 비디오 API를 실제로 어떻게 사용하는지 확실하게 이해할 수 있을 거예요!

3.1 HTML 구조 만들기

먼저 HTML로 기본 구조를 만들어볼게요.


<div id="media-player">
  <video id="myVideo" src="awesome_video.mp4"></video>
  <div id="controls">
    <button id="playPauseBtn">재생/일시정지</button>
    <input type="range" id="progressBar" min="0" max="100" value="0">
    <button id="muteBtn">음소거</button>
    <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
    <button id="fullscreenBtn">전체화면</button>
  </div>
</div>

이렇게 하면 비디오와 컨트롤 버튼들이 있는 기본적인 구조가 만들어져요. 이제 여기에 JavaScript로 기능을 넣어볼 거예요!

3.2 JavaScript로 기능 구현하기

이제 진짜 실력 발휘할 시간이에요! JavaScript로 우리의 미디어 플레이어에 생명을 불어넣어볼까요?


// 요소들 가져오기
const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const muteBtn = document.getElementById('muteBtn');
const volumeBar = document.getElementById('volumeBar');
const fullscreenBtn = document.getElementById('fullscreenBtn');

// 재생/일시정지 기능
playPauseBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playPauseBtn.textContent = '일시정지';
  } else {
    video.pause();
    playPauseBtn.textContent = '재생';
  }
});

// 프로그레스 바 업데이트
video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.value = progress;
});

// 프로그레스 바로 이동하기
progressBar.addEventListener('change', () => {
  const time = (progressBar.value / 100) * video.duration;
  video.currentTime = time;
});

// 음소거 기능
muteBtn.addEventListener('click', () => {
  video.muted = !video.muted;
  muteBtn.textContent = video.muted ? '음소거 해제' : '음소거';
});

// 볼륨 조절
volumeBar.addEventListener('input', () => {
  video.volume = volumeBar.value;
});

// 전체화면 기능
fullscreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
});

와우! 이렇게 하면 기본적인 기능을 갖춘 미디어 플레이어가 완성됐어요. 재생/일시정지, 프로그레스 바, 음소거, 볼륨 조절, 전체화면까지 모든 기능이 다 들어있죠. 여러분도 이제 유튜브 개발자?! ㅋㅋㅋ

3.3 스타일 입히기

기능은 완성됐지만, 아직 좀 밋밋해 보이죠? CSS로 예쁘게 꾸며볼게요!


#media-player {
  max-width: 800px;
  margin: 0 auto;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#myVideo {
  width: 100%;
  display: block;
}

#controls {
  padding: 20px;
  display: flex;
  align-items: center;
  background: #333;
}

button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #45a049;
}

input[type="range"] {
  width: 100%;
  margin: 0 10px;
}

#progressBar {
  flex-grow: 1;
}

이렇게 스타일을 입히면 우리의 미디어 플레이어가 한층 더 멋져 보일 거예요! 모던하고 세련된 디자인이 되었죠? 이제 정말 프로페셔널한 미디어 플레이어가 된 것 같아요! 😎

3.4 추가 기능: 키보드 단축키

사용자 경험을 더욱 향상시키기 위해 키보드 단축키를 추가해볼까요? 이렇게 하면 마우스 없이도 편리하게 조작할 수 있어요.


document.addEventListener('keydown', (e) => {
  switch(e.key.toLowerCase()) {
    case ' ':
      // 스페이스바: 재생/일시정지
      if (video.paused) video.play();
      else video.pause();
      break;
    case 'm':
      // M키: 음소거 토글
      video.muted = !video.muted;
      break;
    case 'f':
      // F키: 전체화면
      if (document.fullscreenElement) document.exitFullscreen();
      else video.requestFullscreen();
      break;
    case 'arrowleft':
      // 왼쪽 화살표: 10초 뒤로
      video.currentTime -= 10;
      break;
    case 'arrowright':
      // 오른쪽 화살표: 10초 앞으로
      video.currentTime += 10;
      break;
  }
});