> ## Documentation Index > Fetch the complete documentation index at: https://docs.beyondwords.io/llms.txt > Use this file to discover all available pages before exploring further. # Minimal Player > A transparent, ultra-minimal player that expands from play + call to action into rate, seek-back, and time controls. export const WebComponentsDemo = ({name}) => { const MOCK_CONTENT = [{ id: "demo-1", title: "How AI voices are changing publishing", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_PLAYLIST = [{ id: "7a974fb1-1b89-4be3-a25d-4ad286d5305b", title: "Part 1: The newsroom shift", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 124, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 124 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "129e7681-fa4d-4526-8be9-d27c946a5023", title: "Part 2: Voices at scale", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 98, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 98 }], video: [], summarization: { audio: [], video: [] }, segments: [] }, { id: "e9f2257c-14cf-46c0-bab6-bcaa9e229775", title: "Part 3: What comes next", imageUrl: "/images/player-ui/demo-cover.svg", sourceUrl: "https://beyondwords.io", sourceId: "demo", adsEnabled: false, duration: 152, audio: [{ id: "audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 152 }], video: [], summarization: { audio: [], video: [] }, segments: [] }]; const MOCK_ADVERTS = [{ id: "advert-1", type: "native", placement: "pre-roll", vastUrl: null, clickThroughUrl: "https://sponsor.example.com", imageUrl: "/images/player-ui/demo-cover.svg", textColor: "#ffffff", backgroundColor: "#943bfc", iconColor: "#ffffff", audio: [{ id: "advert-audio-1", url: "/images/player-ui/demo-silent.mp3", contentType: "audio/mpeg", duration: 8 }], video: [] }]; const content = JSON.stringify(MOCK_CONTENT).replace(/'/g, "'"); const playlistContent = JSON.stringify(MOCK_PLAYLIST).replace(/'/g, "'"); const adverts = JSON.stringify(MOCK_ADVERTS).replace(/'/g, "'"); const DEMOS = { "play-pause-button": ``, "time-indicator": ``, "prev-segment-button": ``, "next-segment-button": ``, "prev-seconds-button": ``, "next-seconds-button": ``, "playback-rate-button": ``, "content-title": ``, "call-to-action": ``, "download-button": ``, "beyondwords-logo": ``, "prev-track-button": ``, "next-track-button": ``, "playlist": ``, "feature-image": `
`, "progress-bar": `
`, "advert-link": ``, "standard-player": ``, "minimal-player": ``, "playlist-player": ``, "video-player": ``, "vertical-video-player": `` }; const markup = DEMOS[name]; return
{markup ?
:

No preview available for “{name}”.

}
; }; ```html MinimalPlayer.html theme={null} ``` ## Installation ```bash npm theme={null} npx @beyondwords/cli components add minimal-player --html ``` ```bash pnpm theme={null} pnpm dlx @beyondwords/cli components add minimal-player --html ``` ```bash yarn theme={null} yarn dlx @beyondwords/cli components add minimal-player --html ``` ```bash bun theme={null} bunx --bun @beyondwords/cli components add minimal-player --html ``` ## Usage Unlike the React block, there is no single `` element. Compose the custom elements inside a [``](/player-ui/html/player-provider): ```html theme={null} ``` While stopped, only play and the "Listen to article" call to action are visible. Once playback starts, seek-back 10s, the speed dropdown (0.9x–2x), and current time appear instead. Every element resolves its nearest [``](/player-ui/html/player-provider) ancestor and subscribes to player events; the buttons emit events built with [`newEvent`](/player-ui/html/new-event). These components expect the BeyondWords player to be available as a global `BeyondWords` (the player UMD script). Load it before the provider connects.