patterns
AudioPlayer
Compact voice-narration player for help articles. Built on a native <audio> element — play/pause, ±10s, scrub, and a speed cycle (1×–2×). Streams the pre-generated mp3 with zero extra dependencies.
The headline of the Help Center: every article is pre-rendered to speech at build time (ElevenLabs in production, a local voice in dev) and played here. Used automatically inside ArticleReader, but exported standalone for any "listen to this" surface.
Install
Import from the workspace package:
import { AudioPlayer } from "@8maverik8/help";Examples
Narration player
Live — playing real narration generated for this site's own help content.
Listen to article
0:00 / 0:00
import { AudioPlayer } from "@8maverik8/help";
<AudioPlayer src="/help-content/en/audio/welcome.mp3" />Anatomy
srcURL of the narration mp3 (generated by @8maverik8/help/build).labelHeading above the controls. Default "Прослушать статью".
Guidelines
- Let the build pipeline generate audio and pass the resulting URL — don't synthesize at request time.Pre-generation makes playback instant and cost flat (paid once per article version).
- Hand-roll a custom audio element or a second player.This one is token-styled, accessible, and consistent across products.