← Back to Examples

Web Player Customization

Tune every option in webPlayer live. Each change re-mounts the player via rv.webPlayer.mount() with leaf-merged overrides. The matching config snippet updates on the right.

Initializing…



      

        
Sample Container — click to mount the player here

        
An empty container you can target with the custom position. Clicking sets position to { target: '#sample-container', at: 'inside' } and re-mounts the player into this box.

      


      

        
Sample article

        

          This article is wrapped by the player. Tweak any option in the panel
          and the player re-mounts with the new config on the fly.
        

        

        

        

          With Sanitize on, the two blocks above are skipped — the
          player neither narrates nor highlights the inline CSS or the button
          label. Turn it off to hear them read as paragraphs.
        

        

          Try toggling controls off one at a time, switch the layout mode
          between shrink and fill, or pick a custom theme to see the tokens
          flow through the pill, progress bar, and paragraph highlight.
        

        

          Click any paragraph to jump narration here — assuming
          paragraphClick is on.
        

        
Why this demo exists

        

          The web player ships with three layered config groups and a 9-token
          theme system. Reading the schema gives you the surface area, but
          seeing each option flip in real time is faster — that's the job of
          this page.
        

        

          The right column shows the exact JSON you'd paste into
          rv.init() or rv.webPlayer.mount() to get
          the same result. Copy it whenever you've tuned something you like.
        

        
Scroll past me to test the mini-player

        

          The mini-player only surfaces when the main player has scrolled out
          of view and something is actively playing or paused. Click
          play, scroll down, and you should see a circular control appear in
          the configured corner of the viewport — defaults to bottom-left,
          and the panel exposes the other three corners too. The
          animation dropdown changes how it appears and
          disappears: slide (default), fade,
          pop, or none. Motion is skipped
          automatically when the browser requests reduced motion.
        

        

          Disabling miniPlayer in the panel removes that
          floating control entirely — useful for short articles or pages
          where a sticky control would feel intrusive.
        

        

          Disabling individual chrome elements via the
          controls group lets you build a stripped-down player
          with only the bits you want. The pill resizes and the right-side
          padding self-balances when progress is the rightmost element.
        

        
Theming notes

        

          The neutral preset is intentionally subdued — slate text on white,
          pink accent for active paragraph highlight. The responsivevoice
          preset uses brand purple. Custom tokens let you override any of
          the nine theme keys directly; missing keys fall through to the
          neutral baseline.
        

        

          The brand glyph and play button face are tied to the
          fill token, so a custom fill: '#ff6b35'
          gives you an orange play button without touching anything else.
        

        

          Spacing is controlled outside the schema via the
          --rv-player-margin CSS custom property. Set it to
          0 to glue the player to surrounding content, or pick
          a larger value for more breathing room.