Saved Successfully.
On this page
WebCore CMS

Narration Studio

Edit the spoken narration for your documentation demo videos, hear it back, and rebuild and publish the finished video - all inside the CMS, no video-editing software required.

What Narration Studio does

The demo videos that appear in your documentation are built from a series of scenes. Each scene shows a screenshot or a recorded interaction, and each has a line of narration - the voice-over that plays over it.

Narration Studio lets you rewrite that voice-over in plain text, choose the voice that reads it, preview any line instantly, and then rebuild the whole video and publish it straight into your site. You never leave the CMS and you never touch a video file by hand.

Where to find it

Open the CMS admin tree and choose Narration Studio. It is available to Site Editors, Site Admins, Site Owners and global Admins. Open a site first, then open the Studio - it always edits the videos for the site you are currently in.

The four steps at a glance

  1. 1
    Pick a video and a voice. Choose which demo video to work on and who reads it.
  2. 2
    Edit the narration. Select a scene, rewrite its line, and preview it until it sounds right.
  3. 3
    Choose each scene's source. Show a still screenshot, or a recorded interaction clip.
  4. 4
    Save, then rebuild and publish. The Studio regenerates the audio and video and overwrites the live one.

Step 1 - Pick a video and a voice

Use the Video dropdown at the top to choose which demo video you want to work on. The badge next to it tells you whether that video has already been published.

Each video has its own Voice picker - a list of natural-sounding British and US voices (for example Sonia, Ryan or Libby for British English, Jenny or Guy for US English). The voice you pick is saved with that video and is used both when you press Preview and when you rebuild the video, so what you hear in preview is exactly what the finished video will use.

Choosing a voice

Pick one voice per video and stick with it, so the whole walkthrough sounds like one narrator. British voices suit UK-facing docs; US voices suit US-facing docs. Preview a sentence or two before you commit - accent and pace vary between voices.

Step 2 - Edit the narration

The row of thumbnails is your filmstrip - one frame per scene. Click a frame to open that scene, then edit its line in the text box. A small toolbar sits under the text box; each button changes how the voice reads the words you have selected. When a line sounds right, press Preview to hear it.

Toolbar button What it does
Pause 0.2s / 0.4s / 0.7s Inserts a short silence where the cursor is, so the voice takes a natural breath between sentences.
Say as Spells a word out letter by letter. Select the word first - for example NDC becomes N D C.
Phonetic Respells a tricky word so it is pronounced correctly, without changing the printed text.
Emphasis Adds stress to the words you have selected so they stand out.
Slower Reads the selected words at a slower pace - handy for a URL or a long term.
Preview Reads the current line aloud using the chosen voice, so you can check it before saving.

Tip: select the exact words you want to change before pressing Say as, Phonetic, Emphasis or Slower - those buttons wrap whatever is selected. Use Prev and Next, or click a filmstrip frame, to move between scenes; unsaved edits are kept as you move around.

Step 3 - Choose each scene's source

Every scene can show one of two things. Use the Scene source radio buttons to switch between them:

Still (screenshot)

The default. A single screenshot is shown with a gentle slow-zoom (a "Ken Burns" effect) while the narration plays. Best for scenes that just need to point at something on screen.

Clip (recorded interaction)

A short recorded interaction - clicking, scrolling and typing on a real page - plays instead of a still. Best for showing how something actually works. See the next section for how to set one up.

Recording an interaction clip

When a scene's source is set to Clip, an extra panel appears. There are two ways to record it. The first is the recommended one.

Scripted clip - recommended and private

You describe the interaction as a list of steps and let the CMS record it for you, automatically, on a hidden browser. Because nothing is captured from your own screen, this is the safe default.

  1. 1
    Set the Page URL - the page you want to record.
  2. 2
    Add Interaction steps in order. Each step is one action with a target on the page (a CSS selector) and, where relevant, a value or a wait in milliseconds.
  3. 3
    When you rebuild the video, the CMS opens the page on a hidden browser, glides a visible cursor to each target with a click ripple, records the result, and fits it to the length of the narration.
Step type What it does
WaitPauses for a set number of milliseconds.
Scroll toScrolls the target into view (or to a scroll position).
Move toGlides the cursor to the target without clicking.
HoverRests the cursor on the target to reveal menus or tooltips.
ClickClicks the target, with a visible click ripple.
TypeTypes the value you supply into the target field.

Advanced options (under the Advanced heading):

  • Wait for selector - hold the recording until a particular element has appeared on the page.
  • Settle (ms) - a short extra pause to let the page finish loading before recording starts.
  • Mask JS - a snippet that runs before recording to hide sensitive content. Use it to blank out client names or other private data so it never appears in the clip.

Recording a page that requires sign-in? A login session has to be saved for that site beforehand (this is done once with the CMS screenshot capture tool). Ask your administrator if a scripted clip of a protected page comes out logged-out.

Live clip - a manual fallback

Press Record (live) to screen-record a shared tab or window in your browser. You navigate through the interaction yourself, press Stop, and the recording uploads to the scene. Use this only when a scripted clip cannot capture what you need.

Privacy - read before using a live recording

A live recording captures whatever is on the shared screen and, unlike a scripted clip, it cannot be masked or edited afterwards. Only ever live-record using a demo or synthetic-data account - never a real customer's data. Scripted steps, which run hidden and honour the Mask JS option, are the safer default.

To check a recording, press Play clip. It opens the recorded clip so you can watch it back.

Step 4 - Save, then rebuild and publish

Save narration

Writes your text, the chosen voice, and any clip settings back to the site. Saving does not change the published video - it just stores your work. Save often.

Rebuild and publish video

Regenerates the audio, re-records any scripted clips, builds the finished MP4, and overwrites the live video on the site. A confirmation appears first, and a progress log shows each step. Always save your text before you rebuild.

Troubleshooting and requirements

Rebuilding a video needs a few services to be switched on for your environment. Where one is missing, the Studio hides the button that needs it and shows a short note explaining the alternative, so you are never left guessing.

  • No Preview or greyed-out preview? The text-to-speech service (Azure Speech) is not configured for this environment. You can still edit and save narration; ask your administrator to enable it.
  • No "Rebuild and publish" button? Server-side video building is switched off, or the video tools are not installed on this server (this is normal on some locked-down hosting). Editing and preview still work; the note on screen gives the command to rebuild the one video from a developer machine instead.
  • A scripted clip did not record? The interaction recorder needs to be available on the server, and a protected page needs a saved login session. Your administrator can confirm both.
For administrators

Full server-side rebuild needs: an Azure Speech key (AZURE_SPEECH_KEY), server build enabled (NARRATION-SERVERBUILD-ENABLED=true), and ffmpeg (FFMPEG-PATH). Scripted clips also need Node and Playwright (NARRATION-RECORDER-SCRIPT, auto-located if blank, and NODE-PATH).

Narration data lives under the site's assets at videos/narration/ (the script files, stills in shots/, recorded clips in clips/); the finished video is videos/certification-<name>.mp4.

powered by webcore cmx

webcore