Skip to main content

볼륨 제어

디지털 휴먼의 음성 볼륨을 실시간으로 조절합니다. 볼륨을 0으로 설정하면 자동으로 음소거(mute)됩니다.

메서드​

setVolume(volume)​

오디오 볼륨을 설정합니다.

public setVolume(volume: number): void

매개변수​

  • volume (number): 볼륨 레벨 (0.0 ~ 1.0)
    • 0.0: 음소거 (muted)
    • 0.5: 50% 볼륨
    • 1.0: 100% 볼륨 (최대)

getVolume()​

현재 볼륨 레벨을 반환합니다.

public getVolume(): number

반환값​

  • number: 현재 볼륨 (0.0 ~ 1.0)

사용법​

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

// 볼륨을 50%로 설정
client.setVolume(0.5);

// 현재 볼륨 확인
const currentVolume = client.getVolume();
console.log(`현재 볼륨: ${currentVolume * 100}%`);

// 음소거
client.setVolume(0);

// 최대 볼륨
client.setVolume(1);

React Hook​

"use client";

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

function VolumeControl() {
  const [volume, setVolume] = useState<number>(1);
  const containerRef = useRef<HTMLDivElement>(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 handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const newVolume = parseFloat(e.target.value);
    setVolume(newVolume);
    client.setVolume(newVolume);
  };

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

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

      <div className="volume-control">
        <input
          type="range"
          min="0"
          max="1"
          step="0.01"
          value={volume}
          onChange={handleVolumeChange}
          disabled={client.state.connection !== "connected"}
          title={`볼륨: ${Math.round(volume * 100)}%`}
        />
        <span>{Math.round(volume * 100)}%</span>
      </div>

      <button onClick={handleConnect}>연결</button>
    </div>
  );
}

음소거 동작​

// 볼륨 0으로 설정 시 자동으로 muted = true
client.setVolume(0);

// 볼륨 > 0으로 설정 시 자동으로 muted = false
client.setVolume(0.5);

관련 기능​

볼륨 제어와 함께 사용할 수 있는 기능들: