🚀 앨범 단위로 스트리밍 하기 (with HLS)

문제 상황

HLS는 실시간 스트리밍 프로토콜로,

클라이언트는 미디어에 대한 playlist를 요청하고, 서버는 이를 보내준다.

클라이언트는 받은 playlist를 읽어 시간에 맞는 세그먼트를 서버에 요청하는 방식이다.

우리 프로젝트는 앨범 단위로 스트리밍하기 때문에, 여러 노래가 하나의 세션에서 스트리밍 되어야 한다는 것이다.

고민한 해결 방안

1. 앨범 노래 순서를 담은 master m3u8 파일을 만들어서 클라이언트가 파싱한다
   1. 클라이언트가 master m3u8 파일을 요청한다
   2. 서버는 요청 받은 시간에 맞춰 (지나간 노래를 제외한) master m3u8 파일을 보낸다
   3. 클라이언트는 해당 m3u8파일을 파싱해서 첫번째 노래의 playlist m3u8 을 요청한다
   4. 서버는 요청 받은 시간에 맞춰 (지나간 세그먼트를 제외) 세그먼트를 전송한다.
2. 클라이언트가 playlist를 요청하면, 서버에서 총 앨범 길이와 비교하z여 요청 시간에 해당하는 곡의 m3u8 을 보낸다.
   1. 클라이언트가 playlist를 요청한다
   2. 서버는 총 앨범의 시간과 클라이언트가 요청을 보낸 시간을 계산하여, 몇 번째, 몇 초쯤인지 계산한다
   3. 시간에 맞는 노래의 지나간 세그먼트를 제외한 세그먼트 파일을 전송한다.

해결방안 선택

1번 방법의 경우,

• 클라이언트가 직접 스트리밍 흐름을 제어할 수 있다
• HlS.js master m3u8 기능을 활용할 수 있다
• 클라이언트 측 복잡성이 증가한다
• 파싱 로직 구현의 어려움이 있다
• 확장성이 제한적이다

2번 방법의 경우,

• 서버에서 전체 스트리밍 흐름을 제어한다
• 클라이언트 구현이 단순화한다.
• 확장성이 높다
• 서버에서 시간을 계산함으로 오버헤드가 증가하고, 로직이 복잡해진다
• 정확한 시간 계산 알고리즘이 필요하다

✅ 2번 방법으로 선택

2번 방법이 서버 중심으로 제어함으로, 사용자들에게 일관되게 노래가 재생될 수 있다는 장점이 있어 선택했다.

또, 클라이언트에서의 파일 파싱이 에러 발생 가능성이 더 높다고 판단했다.

프론트엔드에서 앨범 단위로 플레이리스트 요청하기

2번 방법 선택으로 프론트엔드에서는 playlist m3u8 을 요청만 하면 된다.

하나의 문제는 다음 노래로 넘어갈 때, 다시 m3u8 을 요청해야 한다는 것이다.

이 문제는 audio 태그의 ended 이벤트를 통해 처리한다.

1. 앨범에 대한 playlist url 만들기

const createStreamUrl = (roomId: string) =>`${import.meta.env.VITE_API_URL}/api/music/${roomId}/playlist.m3u8`;

1. hls 연결

  const initializeHls = (audio: HTMLMediaElement, streamUrl: string) => {
    destroyHls();
    const hls = new Hls(DEFAULT_STREAMING_CONFIG);
    hlsRef.current = hls;
    hls.loadSource(streamUrl);
    hls.attachMedia(audio);

    hls.on(Hls.Events.MANIFEST_PARSED, () => setIsLoaded(true));
    hls.on(Hls.Events.ERROR, (error) =>
      console.error('Streaming error:', error),
    );
  };

1. 다음 노래로 넘어가게 처리 ( ended

  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;

    const handleEnded = () => {
      setIsLoaded(false);

      if (songIndex + 1 > totalSongs) {
        setSongIndex(1);
				...
        return;
      }
      setSongIndex((prev) => prev + 1);
      playStream();
    };
    audio.addEventListener('ended', handleEnded);
    return () => {
      audio.removeEventListener('ended', handleEnded);
    };
  }, [songIndex, totalSongs]);