Can I use dynamic tone strings for narration?

No, tone strings should be module-level constants. This ensures that the system can reliably map text to specific audio clips without creating redundant versions during every render.

What is a voice chain in this TTS system?

A voice chain is a prioritized sequence of audio sources—pregenerated files, OpenAI API generation, and browser synthesis—used to ensure audio always plays regardless of network or asset availability.

Does this skill support synchronized subtitles?

Yes, the system includes built-in support for displaying synchronized subtitles on screen based on a reading-time timer associated with the audio playback.

How does the skill handle audio cleanup?

The generated hooks include automated cleanup effects that call the stop() function on component unmount, preventing audio from overlapping or continuing after a user navigates away.

What happens if an OpenAI TTS generation fails?

The voice chain automatically falls back to the browser's built-in SpeechSynthesis API to ensure the user still receives the vocal instruction or feedback.

Text-to-Speech Integration

Name: Text-to-Speech Integration
Author: antialias

byantialias

•

学習とドキュメンテーション

Integrates high-quality text-to-speech narration and audio feedback into web applications using a robust voice chain system.

The add-tts skill streamlines the process of adding vocal instructions, feedback, and narration to your application's features. It leverages a sophisticated voice chain that prioritizes pre-generated MP3s, falls back to on-demand OpenAI TTS generation, and utilizes browser speech synthesis as a final layer, all while providing synchronized subtitles. This skill is ideal for developers building educational platforms, interactive tutorials, or accessibility-focused interfaces where clear, tone-specific guidance is essential for the user experience.

主な機能

011 GitHub stars

02Automated voice chain management with fallback logic

03Support for dynamic text processing and math-to-speech

04Tone-specific narration using voice-actor stage directions

05Feature-specific React hook generation for audio logic

06Automatic subtitle synchronization and playback cleanup

ユースケース

01Providing encouraging audio feedback for educational gamification

02Adding step-by-step vocal guidance to interactive tutorials

03Implementing accessible math problem narration for young learners

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antialias/abaci-one add-tts

For use in Claude.ai and ChatGPT

Download Skill