배경 음악 설정

디지털 휴먼 환경에 배경 음악을 설정하거나 제거합니다.

메서드

sendBackgroundMusicUrl(url)

배경 음악 URL을 설정합니다.

public sendBackgroundMusicUrl(url: string): void

매개변수

• url (string): 배경 음악 파일 URL

sendBackgroundMusicReset()

설정된 배경 음악을 제거합니다.

public sendBackgroundMusicReset(): void

사용법

JavaScript/TypeScript

import { KleverOneClient } from "@klever-one/web-sdk/core";

const client = new KleverOneClient({
  apiKey: "your-api-key",
  container: document.getElementById("streaming-container"),
});

await client.connect();

// 배경 음악 설정
client.sendBackgroundMusicUrl("https://example.com/background-music.mp3");

// 배경 음악 제거
client.sendBackgroundMusicReset();

React Hook

"use client";

import { useRef, useEffect, useMemo } from "react";
import { useKleverOneClient } from "@klever-one/web-sdk/react";

function BackgroundMusicControl() {
  const containerRef = useRef<HTMLDivElement>(null);
  const musicFileInputRef = useRef<HTMLInputElement>(null);

  const tempContainer = useMemo(() => {
    if (typeof document !== "undefined") {
      return document.createElement("div");
    }
    return {} as HTMLDivElement;
  }, []);

  const client = useKleverOneClient({
    apiKey: "your-api-key",
    container: containerRef.current || tempContainer,
    callbacks: {
      onReady: () => console.log("디지털 휴먼 준비 완료!"),
    },
  });

  useEffect(() => {
    return () => {
      if (client.client) {
        client.disconnect();
      }
    };
  }, [client.client]);

  const handleConnect = async () => {
    if (containerRef.current && client.client) {
      try {
        await client.connect();
      } catch (error) {
        console.error("연결 실패:", error);
      }
    }
  };

  const handleSetMusic = () => {
    if (client.client) {
      // 파일 선택 대화상자 열기
      musicFileInputRef.current?.click();
    }
  };

  const handleMusicFileChange = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    if (!file || !client.client) return;

    try {
      console.log(`음악 파일 업로드 시작: ${file.name}`);

      // TODO: 여기에 사용자의 파일 업로드 서버 로직 구현
      // 예시:
      // const formData = new FormData();
      // formData.append("file", file);
      // const response = await fetch("YOUR_UPLOAD_SERVER_URL", {
      //   method: "POST",
      //   body: formData,
      // });
      // const result = await response.json();
      // const fileUrl = result.url;

      // 임시: 테스트용 URL (실제로는 업로드 후 받은 URL 사용)
      const fileUrl = "https://example.com/uploaded-music.mp3";

      // 업로드된 URL로 배경 음악 설정
      client.sendBackgroundMusicUrl(fileUrl);
      console.log(`배경 음악 설정: ${fileUrl}`);
    } catch (error) {
      console.error("Music upload error:", error);
      alert(`업로드 실패: ${(error as Error).message}`);
    } finally {
      // 파일 input 초기화 (같은 파일 재선택 가능하도록)
      event.target.value = "";
    }
  };

  const handleResetMusic = () => {
    if (client.client) {
      client.sendBackgroundMusicReset();
    }
  };

  return (
    <div>
      <div
        ref={containerRef}
        className="h-[400px] w-[800px] bg-black rounded-lg"
      ></div>

      <div className="controls">
        <button onClick={handleConnect}>연결</button>
        <button
          onClick={handleSetMusic}
          disabled={client.state.connection !== "connected"}
        >
          배경 음악 설정
        </button>
        <input
          ref={musicFileInputRef}
          type="file"
          accept="audio/*"
          onChange={handleMusicFileChange}
          style={{ display: "none" }}
        />
        <button
          onClick={handleResetMusic}
          disabled={client.state.connection !== "connected"}
        >
          배경 음악 제거
        </button>
      </div>
    </div>
  );
}

주의사항

• 배경 음악 URL은 HTTPS 프로토콜을 사용하는 것을 권장합니다.
• 지원하는 오디오 포맷: MP3, WAV
• 배경 음악은 연결 상태에서만 설정/제거할 수 있습니다.

관련 기능

배경 음악 설정과 함께 사용할 수 있는 기능들:

• 볼륨 제어 - 오디오 볼륨 조절
• 연결 - 디지털 휴먼 연결