Tạo video tự động với Claude và Giọng đọc AI

Quy trình từng bước lập trình tạo video hoạt hình và tài liệu giáo dục tự động bằng Remotion (React + TypeScript) kết hợp lồng ghép giọng đọc AI TTS chuẩn timestamp.

Lập trình video tự động bằng mã nguồn (Code-based Video Creation) với Remotion (React + TypeScript) đang thay đổi hoàn toàn cách các nhà phát triển và nhà sáng tạo nội dung sản xuất video hàng loạt. Thay vì phải kéo thả thủ công trên các phần mềm dựng phim truyền thống, bạn có thể biến dữ liệu động, văn bản và hình ảnh thành các video hoạt hình chuyển động mượt mà 60fps, tự động hóa 100% từ khâu thiết kế giao diện đến xuất file MP4.

Trong bài hướng dẫn này, bạn sẽ nắm trọn quy trình 5 bước xây dựng một video chủ đề 'Khám phá thiên nhiên' hoàn chỉnh với Remotion, từ cấu hình Composition, viết Component chuyển động, căn chuẩn timestamp cho giọng đọc AI (TTS) đến render video MP4 chất lượng cao.

Concept mẫu: “Khám Phá Rừng Nhiệt Đới Kì Thú (Nature Explorer 60s)”

• Thể loại: Video hoạt hình giáo dục, tài liệu ngắn khám phá thiên nhiên cho trẻ em và gia đình. • Cấu trúc: 8 phân cảnh (Scenes) chuyển tiếp mượt mà qua các hệ sinh thái (rừng rậm, dòng suối, chim muông, tán cây hoàng hôn). • Thông số kỹ thuật: Độ phân giải 1920x1080 (16:9), 30fps, thời lượng 60 giây (tổng cộng 1800 frames). • Thành phần: Vector Graphic minh họa, hiệu ứng chuyển động Spring Animation mượt mà, typography động, phụ đề tự nhảy và voice-over AI ấm áp.

Quy trình 5 bước lập trình video với Remotion & Giọng đọc AI

Bước 1: Khởi tạo dự án Remotion & Cấu hình Root Composition

Khởi tạo nhanh dự án Remotion với TypeScript thông qua câu lệnh CLI và thiết lập file Root.tsx:

npx create-video@latest nature-video --template blank-typescript
cd nature-video
npm install @remotion/transitions

Định nghĩa Root Composition trong file src/Root.tsx với thời lượng 60 giây (1800 frames ở 30fps):

import { Composition } from 'remotion';
import { NatureExplorer } from './NatureExplorer';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="NatureExplorer"
      component={NatureExplorer}
      durationInFrames={1800}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Bước 2: Xây dựng Scene Component và Hiệu ứng chuyển động

Sử dụng useCurrentFrame và interpolate/spring của Remotion để tạo chuyển động phóng to nhẹ nhàng (Ken Burns Effect) và chữ trượt vào mượt mà:

import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

export const IntroScene: React.FC<{ title: string; subtitle: string }> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const titleScale = spring({ frame, fps, config: { damping: 12 } });

  return (
    <AbsoluteFill style={{ backgroundColor: '#1A3323', justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: '#E8F5E9', fontSize: 80, transform: `scale(${titleScale})`, opacity: titleOpacity }}>
        {title}
      </h1>
      <p style={{ color: '#A5D6A7', fontSize: 36, marginTop: 20 }}>{subtitle}</p>
    </AbsoluteFill>
  );
};

Bước 3: Lên kịch bản Voice-over khớp chuẩn Timestamp từng Scene

Để đảm bảo giọng đọc không bị tràn qua phân cảnh tiếp theo, tốc độ đọc cần duy trì ở mức chuẩn 2.5 - 3 từ/giây (dành cho nội dung khám phá, giáo dục):

KỊCH BẢN VOICE-OVER 8 PHÂN CẢNH (TỔNG 60 GIÂY):

• Scene 1 (00:00 - 00:07 | 210 frames): "Chào mừng các bạn nhỏ đến với hành trình khám phá thế giới tự nhiên kỳ thú!"
• Scene 2 (00:07 - 00:15 | 240 frames): "Sâu trong lòng rừng rậm nhiệt đới, hàng triệu loài sinh vật đang cùng sinh sống và phát triển."
• Scene 3 (00:15 - 00:23 | 240 frames): "Những tán cây khổng lồ vươn cao, che chở cho muôn loài dưới ánh nắng ban mai rực rỡ."
• Scene 4 (00:23 - 00:30 | 210 frames): "Lắng nghe tiếng suối reo róc rách, nơi dòng nước mát lành nuôi dưỡng sự sống muôn nơi."
• Scene 5 (00:30 - 00:38 | 240 frames): "Những chú chim sặc sỡ cất tiếng hót líu lo, báo hiệu một ngày mới tràn đầy năng lượng."
• Scene 6 (00:38 - 00:45 | 210 frames): "Thế giới vi mô dưới thảm lá rừng cũng vô cùng nhộn nhịp với các bạn côn trùng chăm chỉ."
• Scene 7 (00:45 - 00:53 | 240 frames): "Khi hoàng hôn buông xuống, khu rừng khoác lên mình chiếc áo màu vàng cam lộng lẫy."
• Scene 8 (00:53 - 01:00 | 210 frames): "Hãy cùng chung tay bảo vệ thiên nhiên tươi đẹp nhé! Hẹn gặp lại các bạn trong chuyến phiêu lưu tới."

Bước 4: Tạo Audio TTS và Nhúng vào Remotion Sequence

Sử dụng các công cụ TTS như ElevenLabs, Vbee hoặc FPT.AI để tạo file voice-over (định dạng WAV/MP3). Sau đó đưa file vào thư mục public/audio/ và sử dụng thẻ Audio bên trong Sequence:

import { Audio, Sequence, staticFile } from 'remotion';

export const NatureExplorer: React.FC = () => {
  return (
    <>
      {/* Nhạc nền nhẹ nhàng */}
      <Audio src={staticFile('audio/nature-bgm.mp3')} volume={0.15} />

      {/* Scene 1: 0 - 7s (Frame 0 -> 210) */}
      <Sequence from={0} durationInFrames={210}>
        <IntroScene title="Khám Phá Thiên Nhiên" subtitle="Chuyến phiêu lưu vào rừng nhiệt đới" />
        <Audio src={staticFile('audio/voice-scene-1.mp3')} volume={1.0} />
      </Sequence>

      {/* Scene 2: 7s - 15s (Frame 210 -> 450) */}
      <Sequence from={210} durationInFrames={240}>
        <ForestScene />
        <Audio src={staticFile('audio/voice-scene-2.mp3')} volume={1.0} />
      </Sequence>
    </>
  );
};

Bước 5: Render Video MP4 qua Remotion CLI

Kiểm tra bản xem trước trực tiếp trên Remotion Studio bằng lệnh: npm start (mặc định tại localhost:3000). Khi mọi chuyển động và âm thanh đã đồng bộ hoàn hảo, chạy lệnh render để xuất file MP4:

npx remotion render src/index.ts NatureExplorer out/nature-explorer-1080p.mp4 --codec=h264 --crf=18

Checklist kiểm tra trước khi xuất bản video

Hệ thống sản xuất tinh gọn

Khởi tạo Remotion Root (1080p, 30fps, 1800 frames)
→ Thiết kế UI & Animation Component bằng React / Framer Motion
→ Viết kịch bản Voice-over canh chuẩn timestamp từng giây
→ Tạo audio AI TTS (ElevenLabs / Vbee) & Nhúng vào Sequence
→ Preview trên Remotion Studio & Tinh chỉnh frame math
→ Render tự động ra file MP4 bằng Remotion CLI

Lập trình video bằng Remotion kết hợp với giọng đọc AI giúp bạn xây dựng pipeline tự động hóa sản xuất video hàng loạt, dễ dàng cá nhân hóa nội dung cho từng đối tượng khán giả mà không tốn công sức chỉnh sửa thủ công.