Beta Kirby plugin for convenient import, management, and audio sync of podcast transcripts.
This plugin currently tracks the beta release line and is prepared for Composer-based installation. Install the latest stable release by default or explicitly require a beta version while the plugin is still pre-1.0.
- Multiline transcript format (Speaker → Timestamp → Text)
- Panel importer (TXT upload, paste, ElevenLabs TXT, DOTE JSON, ElevenLabs JSON)
- Preview with validation
- Block integration for any episode
- Audio sync with Podlove Web Player v5
Simple multiline format with blank line separators:
Speaker Name
MM:SS or HH:MM:SS
Transcript text content
Next Speaker
MM:SS or HH:MM:SS
More text content
Rules:
- Line 1: Speaker name
- Line 2: Timestamp (MM:SS or HH:MM:SS) – optional
- Line 3+: Text (can span multiple lines)
- Blank line: Segment separator
The importer also accepts additional transcript exports:
-
ElevenLabs TXT with timestamp ranges like 00:00:00,520 --> 00:00:07,470 [Speaker]
-
DOTE JSON with lines/startTime/speakerDesignation/text
-
ElevenLabs JSON with segments/start_time/speaker/text
For ElevenLabs imports, the segment text is used as the paragraph content. The nested words array is ignored.
- Unzip to
site/plugins/kirby-tw-transcript - Or install the latest stable release via Composer:
composer require macx/kirby-tw-transcript- Or install the latest beta via Composer:
composer config repositories.kirby-tw-transcript vcs https://github.com/macx/kirby-tw-transcript
composer require macx/kirby-tw-transcript:"@beta"- Or install a specific beta version:
composer require macx/kirby-tw-transcript:"0.10.0-beta.1"- In Kirby Panel: Go to "Transcript Import" area
- Upload a TXT or JSON file, or paste transcript text/JSON
- Review preview, select target episode, import
- Transcript saved as block and synced with player
To load the transcript styles and enable the Podlove Web Player synchronization on your website, you must include the plugin's CSS and JavaScript assets in your templates (e.g., in your header/footer snippets):
<?= css('media/plugins/tw/transcript/tw-transcript.css') ?>Important
The JavaScript bundle is compiled as an ES Module. To load the file and initialize the player sync, import the initPodlovePlayers function and call it:
<script type="module">
import { initPodlovePlayers } from '<?= url('media/plugins/tw/transcript/tw-transcript.js') ?>';
initPodlovePlayers();
</script>Whether installed manually or via Composer, the plugin resides in your project at site/plugins/kirby-tw-transcript/. You can import the assets directly from this directory into your own frontend build pipeline (e.g. using Vite or Webpack) to compile them as part of your main website bundle.
Since Vite supports TypeScript natively, you can import the initialization function and styles directly in your entry script (e.g., src/main.ts):
// Using relative path:
import { initPodlovePlayers } from '../site/plugins/kirby-tw-transcript/src/podlove-player.ts';
import '../site/plugins/kirby-tw-transcript/assets/tw-transcript.css';
// Or using path alias (if configured in tsconfig.json & vite.config.ts):
// import { initPodlovePlayers } from '@plugins/kirby-tw-transcript/src/podlove-player.ts';
// import '@plugins/kirby-tw-transcript/assets/tw-transcript.css';
// Initialize player synchronization
initPodlovePlayers();If you prefer not to compile the TypeScript file in your main site pipeline, you can import and call the pre-compiled JS bundle:
import { initPodlovePlayers } from '../site/plugins/kirby-tw-transcript/assets/tw-transcript.js';
import '../site/plugins/kirby-tw-transcript/assets/tw-transcript.css';
initPodlovePlayers();This plugin uses TypeScript for its frontend synchronization logic.
We use Node.js and manage pnpm via Corepack:
-
Enable Corepack and prepare the package manager:
corepack enable corepack prepare pnpm@latest --activate -
Install development dependencies:
pnpm install
-
Typecheck: Verify TypeScript code type-safety:
pnpm run typecheck
-
Build: Bundle the TypeScript source from
src/podlove-player.tstoassets/tw-transcript.js:pnpm run build
-
Watch: Watch the source files and auto-compile on changes:
pnpm run watch
See PUBLISHING.md for the exact beta, tagging, GitHub, and Composer release flow.
MIT