Newer
Older
remotion_docker_devcontainer / voicevox-remotion-template / src / lib / VQRemotionLib / components / VQTimelineAudio.tsx
import React from "react";
import {Audio} from "@remotion/media";
import {staticFile} from "remotion";
import type {VQAudioEvent} from "../timeline";

const externalAudioSourcePattern = /^(https?:|data:|blob:)/;

// 用途: audioイベントのsrcをRemotionで再生できるURLへ変換する。
// 使用方法: VQTimelineAudio内でpublic配下の相対パスと外部URLを同じpropsから扱う。
// オプションや引数詳細: http/https/data/blobはそのまま返し、それ以外はstaticFileのpublic相対パスとして扱う。
const resolveAudioSource = (src: string) =>
  externalAudioSourcePattern.test(src) ? src : staticFile(src);

// 用途: VQAudioEventをタイムライン上の音声レイヤーとして再生する。
// 使用方法: scheduled segmentのSequence内でaudioイベントを渡して使う。
// オプションや引数詳細: 再生尺は親Sequenceで制御し、loop/音量/速度はeventから反映する。
export const VQTimelineAudio: React.FC<
  Readonly<{
    audio: VQAudioEvent;
  }>
> = ({audio}) => (
  <Audio
    loop={audio.playback === "loop"}
    loopVolumeCurveBehavior={audio.loopVolumeCurveBehavior}
    playbackRate={audio.playbackRate}
    toneFrequency={audio.toneFrequency}
    volume={() => audio.volume ?? 1}
    src={resolveAudioSource(audio.src)}
  />
);