HTML.오디오 비디오 제어 및 위치 정보 서비스, 웹 워커

🎧 HTML5의 강력한 웹 기술: 오디오/비디오, 위치 정보, 웹 워커

웹 페이지는 더 이상 단순히 정보를 보여주는 데 그치지 않습니다. 이제는 미디어 재생, 사용자 위치 파악, 백그라운드 계산 처리까지 가능하죠. 오늘은 HTML5가 제공하는 대표적인 기능 3가지를 소개합니다.

📌 목차

• 1. HTML5 오디오/비디오 제어
• 2. 위치 정보 서비스 (Geolocation API)
• 3. 웹 워커 (Web Worker)

1. 🎬 HTML5 오디오/비디오 제어

HTML5 이전에는 플러그인을 설치해야 미디어 재생이 가능했지만, <audio>와 <video> 태그가 생기면서 웹 표준으로 미디어 삽입이 가능해졌습니다.

<audio id="myAudio" src="media/audio.mp3" controls loop></audio>

<video id="myVideo" src="media/video.mp4" controls width="640" height="360"></video>

자바스크립트를 통해 다음과 같이 제어할 수 있습니다:

let audio = document.getElementById("myAudio");
let video = document.getElementById("myVideo");

audio.play();      // 오디오 재생
video.pause();     // 비디오 일시정지
audio.volume = 0.5;// 볼륨 조절

video.addEventListener("ended", () => {
  alert("비디오 재생 종료!");
});

2. 📍 위치 정보 서비스 (Geolocation API)

Geolocation API는 사용자의 위도(latitude), 경도(longitude)를 가져올 수 있는 기능입니다. 단, 반드시 사용자 동의가 필요합니다.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      console.log("현재 위치: 위도 " + lat + ", 경도 " + lon);
    },
    (error) => {
      alert("오류 발생: " + error.message);
    },
    {
      enableHighAccuracy: true,
      timeout: 5000,
      maximumAge: 0
    }
  );
} else {
  alert("이 브라우저는 위치 정보를 지원하지 않습니다.");
}

watchPosition()을 사용하면 사용자의 위치가 변경될 때마다 자동으로 감지할 수 있습니다.

let watchId = navigator.geolocation.watchPosition((pos) => {
  console.log("위치 변경: ", pos.coords.latitude, pos.coords.longitude);
});

// 감지 종료
navigator.geolocation.clearWatch(watchId);

3. 🧠 웹 워커 (Web Worker)

자바스크립트는 기본적으로 단일 스레드입니다. 복잡한 계산을 처리하면 UI가 멈추는 문제를 해결하기 위해 웹 워커가 도입되었습니다.

1) 메인 스레드에서 워커 생성

let myWorker = new Worker("my_worker.js");

myWorker.onmessage = (e) => {
  console.log("워커로부터 받은 메시지:", e.data);
};

myWorker.postMessage({ start: 1, end: 100 });

2) 웹 워커 파일 (my_worker.js)

onmessage = function(e) {
  let sum = 0;
  for (let i = e.data.start; i <= e.data.end; i++) {
    sum += i;
  }
  postMessage(sum);
};

3) 워커 종료

myWorker.terminate();   // 메인 스레드에서 종료
// 워커 내부에서 종료: self.close();

🔚 마무리하며

HTML5는 단순한 마크업 언어를 넘어, 웹을 풍부하게 만드는 다양한 API를 제공합니다.

• <audio>, <video> 태그: 멀티미디어 콘텐츠 삽입
• Geolocation API: 위치 기반 서비스 구현
• Web Worker: 비동기 작업으로 성능 향상

이 기능들을 조합하면 훨씬 더 인터랙티브하고 고성능인 웹 앱을 만들 수 있습니다. 꾸준히 연습해보세요! 💪