VOCALSTACK FOR PAYLOAD CMS

Transcripts as content

A Transcribe button on every audio upload in Payload. The transcript is saved on the document as editable text and timed sentences, so your frontend, your search and your APIs read it like any other field.

View on GitHub Get an API Key

PAYLOAD 3 · NEXT.JS 15+ · FROM $0.20 AN HOUR OF AUDIO

MEDIA · EPISODE-042.MP3Sidebar

Transcribing31:06 / 48:20

json

{
  "vocalstack": {
    "status": "done",
    "language": "en",
    "transcript": "Welcome back to the show. Today…",
    "sentences": [
      { "start": 0.4, "end": 2.9, "speaker": 0,
        "text": "Welcome back to the show." }
    ]
  }
}

Just another field

The transcript and its timed sentences live on the document, so the Local API, REST and GraphQL return them with everything else.

Progress you can see

The button shows how much audio is done and survives a reload. Stop puts the document back the way it was.

Editors stay in charge

The transcript is plain text an editor can correct. Paragraphs break where the speaker changes or pauses.

Key stays on the server

A connected API key is stored server-side and can't be read over the REST or GraphQL APIs.

SETUP

One plugin, one line

Add the plugin to payload.config.ts. Every upload collection that accepts audio gets the button; pass collections to choose which. Leave out the key and an editor connects an account from Settings → VocalStack instead.

01Install the plugin from GitHub and add it to your config.

02Run payload generate:importmap. With Postgres, also run payload migrate:create.

03Open an audio upload and click Transcribe.

bash

pnpm add github:vocalstack/payload-plugin

typescript

// payload.config.ts
import { vocalstackPlugin } from '@vocalstack/payload'

export default buildConfig({
  plugins: [
    vocalstackPlugin({
      // Optional: or connect from Settings → VocalStack
      apiKey: process.env.VOCALSTACK_API_KEY,
    }),
  ],
})

OPTIONS

Fits the way you built it

Sensible defaults, and a hook for every place your setup differs.

collections

Which upload collections get the Transcribe button. By default, every one that accepts audio.

audioFields

Imported content that points at audio by filename or link. Each row of an array field gets its own button and transcript.

spokenLanguage

The language spoken in the audio. Leave it out to detect it automatically.

fileURL

The address VocalStack fetches the audio from. Point it at your bucket to skip the Payload file proxy.

access

Who may transcribe and change the connection. By default, signed-in users who can update the document.

PRICING

No plugin fee

You pay VocalStack only for the audio you transcribe, on the same rate as the Dashboard and the API. Billed per second, with a minimum of 5 minutes per transcription.

See Pricing Get an API Key

FILES$0.20an hour

Every audio upload and array row you transcribe, with speakers, punctuation and timings included.

Frequently Asked Questions

: Yes. When the file has no public address, such as on localhost or a private network, the plugin uploads the audio instead of sending a link.
: No. Return the bucket's public address from fileURL and VocalStack fetches the file from there directly.
: Yes. audioFields gives each row of an array field its own Transcribe button, using an address you build from the row.
: The timed sentences are saved with start and end times and a speaker for each one, so your frontend can render captions, a click-to-seek transcript or a synced player.
: Yes. The transcript is a text field on the document, and an editor can correct it like any other.
: Payload 3, Next.js 15 or later, React 19 and Node 20 or later.

View on GitHub Read the README