Files
VrchStudio-comfyui-web-viewer/docs/tutorial_006_srt_to_audio_picture_book.md

7.9 KiB
Raw Permalink Blame History

Tutorial 006: Audio Picture Book with Your Own Voice

You can Download the Workflow Hewre

TL;DR

This tutorial guides you on how to create an AI-powered Audio Picture Book using your own cloned voice with the ComfyUI Web Viewer. It utilizes the Audio Recorder, TEXT SRT Player, and web viewer nodes to transform timed SRT subtitle files into synchronized audio-visual storytelling experiences. Your voice recordings are cloned to narrate stories, while AI dynamically generates matching visuals in real-time.

Practical Use Cases:

  • Personalized audio books with visually rich storytelling.
  • Real-time, interactive visual and audio content for educational or entertainment settings.
  • Immersive presentations and performances with custom voice narration.

🚀 Support Us:

If you find the ComfyUI Web Viewer useful or inspiring, consider supporting us:

  • 💖 Sponsor: Help us maintain and enhance the project through GitHub Sponsors.
  • ⭐ Star the Project: A star on GitHub greatly motivates us and helps increase visibility!
  • 📩 Business Inquiries: For commercial collaborations, reach us at hi@vrch.io.

Preparations

Download Tools and Models

Install Main Custom Nodes

  1. ComfyUI-F5-TTS

  2. ComfyUI-Web-Viewer

  3. ComfyUI Ollama:

  4. ComfyUI TeaCache:

Install Other Necessary Custom Nodes

How to Use

Run Workflow in ComfyUI

  1. Open the Workflow
  2. Record Your Voice
    • In the Audio Recorder @ vrch.ai node:
      • Press and hold the [Press and Hold to Record] button.
      • Read aloud the text in Sample Text to Record (for example):

        This is a test recording to make AI clone my voice.

  3. Trigger the SRT Player
    • Change the [Queue] button to [Queue (Instant)]
    • In the TEXT SRT Player @vrch.ai node:
      • Click [Play SRT File] button to start SRT player
    • Click [Queue (Instant)] button to start Infinite Queue
  4. Open Audio Web Viewer Page for Audio Play
    • In the AUDIO Web Viewer @ vrch.ai node, click the [Open Web Viewer] button.
    • A new browser window (or tab) will open, playing the story audio with your cloned voice.
  5. Open Image Instant Viewer Page for Image Display
    • In the IMAGE Web Viewer @ vrch.ai node, click the [Open Web Viewer] button.
    • A new browser window (or tab) will open, display the story pictures generated.
  6. (Optinal) Enable Preview Image in Background for Image Preview in ComfyUI
    • In the IMAGE Preview in Background @ vrch.ai node, enable background_display option
    • The story pictures will be displayed in ComfyUI web page as background

Example: SRT Format Stories

Story One

1
00:00:00,000 --> 00:00:13,000
Little Deer opened her eyes as moonlight gently caressed the forest.
The woods at night were wrapped in a silvery veil, peaceful and enchanting.

2
00:00:13,000 --> 00:00:25,000
“Little deer, a star has lost its way,” whispered the owl from the tall oak tree,
his eyes glowing softly in the moonlight.

3
00:00:25,000 --> 00:00:42,000
Tiptoeing gently through the forest, Little Deer passed a sleeping hedgehog curled beneath leaves,
and a little fox smiling sweetly in his dreams.

4
00:00:42,000 --> 00:00:56,000
Soon, little deer spotted a star gently floating on the lake,
glimmering quietly and rocking with the waves.

4
00:00:56,000 --> 00:01:10,000
Little deer carefully waded into the water and whispered softly,
“Don’t be afraid, little star. I'll help you find your way back home.”

6
00:01:10,000 --> 00:01:25,000
She looked upward, where countless stars twinkled brightly in the velvet sky,
each gently waving, waiting for their lost friend to return.

7
00:01:25,000 --> 00:01:42,000
Gently lifting the star back into the sky, little deer watched as it shone brighter,
joining friends that twinkled happily in thanks.

8
00:01:42,000 --> 00:02:00,000
Little deer lay down softly beneath the tree, closed her eyes,
and drifted into sweet dreams, as the forest sparkled brighter than ever,
wrapping every animal in the gentlest sleep.

Story Two

1
00:00:00,000 --> 00:00:13,000
As little rabbit opened her eyes, the moonlight softly touched the forest.
The night was quiet and calm, like a gentle lullaby.

2
00:00:13,000 --> 00:00:25,000
“Little rabbit, the forest is yours tonight,”
said a tiny firefly, glowing gently like a star.

3
00:00:25,000 --> 00:00:42,000
She hopped through the woods, gently checking on her sleeping friends—
the hedgehog curled up tight, the little fox smiling sweetly.

4
00:00:42,000 --> 00:00:56,000
Suddenly, rabbit saw the reflection of the moon in the pond,
but the little moon in the water was crying softly.

5
00:00:56,000 --> 00:01:10,000
“Don’t cry, little moon, I’m here,”
rabbit said, crafting a leaf boat and gently sailing toward the center.

6
00:01:10,000 --> 00:01:25,000
She gently rocked the moon to sleep,
until the little reflection smiled again, shimmering happily.

7
00:01:25,000 --> 00:01:42,000
Back on shore, rabbit looked up to the sky,
where the real moon smiled warmly down at them.

8
00:01:42,000 --> 00:02:00,000
Rabbit closed her eyes, cuddling softly beneath the trees.
Tonight, every animal slept peacefully under the gentle moonlight.

References