> ## 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. # Playback Rate Button > Toggles the player's playback speed between 1x and 1.5x. 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}”.

}
; }; ```js PlaybackRateButton.js theme={null} import { BwPlayerConsumer } from "@/registry/html/PlayerProvider"; export class BwPlaybackRateButton extends BwPlayerConsumer { _btn = null; _listener = null; constructor() { super(); this._btn = document.createElement("button"); this._btn.addEventListener("click", () => { if (!this._player) return; this._player.playbackRate = this._player.playbackRate === 1 ? 1.5 : 1; }); } connectedCallback() { super.connectedCallback(); this._listener = this._player?.addEventListener("", () => { this._btn.textContent = `${this._player.playbackRate}x`; }); this._btn.textContent = `${this._player?.playbackRate}x`; this.appendChild(this._btn); } disconnectedCallback() { this._player?.removeEventListener("", this._listener); this._listener = null; super.disconnectedCallback(); } } customElements.define("bw-playback-rate-button", BwPlaybackRateButton); ``` ## Installation ```bash npm theme={null} npx @beyondwords/cli components add playback-rate-button --html ``` ```bash pnpm theme={null} pnpm dlx @beyondwords/cli components add playback-rate-button --html ``` ```bash yarn theme={null} yarn dlx @beyondwords/cli components add playback-rate-button --html ``` ```bash bun theme={null} bunx --bun @beyondwords/cli components add playback-rate-button --html ``` ## Usage Import the modules (each calls `customElements.define`), then use the elements. Nest the button inside a ``. ```html theme={null} ``` `` finds its nearest [``](/player-ui/html/player-provider) ancestor and reads `playbackRate` from it, updating on every player event. On click, it sets `player.playbackRate` directly on the instance, toggling between `1` and `1.5`. The current rate renders as the label (e.g. `1x`). Adjust the toggle logic to expose whatever speeds you want. These components expect the BeyondWords player to be available as a global `BeyondWords` (the player UMD script). Load it before the provider connects. ## Reference | | | | --------------------- | ------------------------------------------------------------------ | | **Attributes** | None | | **Player state read** | `playbackRate` | | **Events emitted** | None. Sets `player.playbackRate` directly | | **Requires** | a `` ancestor and the player UMD global loaded |