# Sarau A podcast player with chapters on the bar and a transcript that highlights and scrolls to the line being played. > Sarau is an exclusive THM Componentes component with the full interface of an episode page: a transcript that highlights and scrolls to the current line, click a line to jump to it, chapters on the bar, playback speed, 15-second skips and keyboard shortcuts. The demo episode is synthesized in the browser, with no audio file. - Category: Images and media - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/sarau/ ## What it looks like It looks like the player from a podcast app, placed on the page over a light background. At the top sit the square cover, the episode title and subtitle, and a tag showing the current chapter. Below, a thin bar split into segments, one per chapter, fills with an indigo to cyan gradient. Next come the round play button, the 15-second back and forward buttons and the speed selector. At the bottom is the transcript: each line shows the speaker in a colored tag and its start time, and the current line stays highlighted and centered. ## You may be looking for this if you asked for something like - “a podcast player where the transcript follows along with the speech” - “episode text that highlights the sentence currently playing” - “an audio player with chapters marked on the progress bar” - “click a line in the transcript and the audio jumps there” - “a player like the ones in podcast apps, but on my own site” - “put our company podcast on the site with an accessible transcript” ## Also known as podcast player, audio player, synced transcript, interactive transcript, audio chapters, episode player ## When to use - An episode page for a company, school or institution podcast - Spoken summaries and audio descriptions that need text alongside - A prototype for an audio product before the final files exist - Accessible content where the transcript must be visible and navigable ## When to avoid - When you need to play a real audio file without adapting the component - Lists with many episodes on one screen, where a compact player is enough ## How to ask your AI ```text Create a podcast player with a synced transcript: the current line is highlighted and scrolls with the audio, clicking a line jumps there, chapters on the bar, playback speed and 15-second skips. I want keyboard shortcuts, screen reader announcements of the position and no smooth scrolling for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Sarau ### Does Sarau play my own audio file? Not directly. Sarau ships with a demo episode of just over a minute, with two voices synthesized in the browser that mimic the cadence of speech without real words, plus a sample transcript. For a real episode, ask your AI to replace the synthesis with an audio element and load your transcript with the start time of each line. ### Does Sarau work with a keyboard and screen readers? Yes. In Sarau the progress bar acts as a slider that announces time and chapter, the buttons have labels and there are shortcuts: Space plays and pauses, J and L skip back and forward 15 seconds, and the arrow keys on the bar move 5 seconds. The current transcript line is marked for assistive technology. ### Does Sarau's transcript scroll by itself? It does, with the autoScroll prop on, which is the default. Sarau keeps the current line centered while the audio plays and stops following for a few seconds when the listener scrolls the transcript manually. With reduced motion turned on, the jump to the line happens without smooth scrolling. ## Related components - [Pandeiro](https://vibecode.thmtecnologia.com/en/components/pandeiro/): A disc ringed by bars that dance with the sound, or flowing wave lines, playing ambient audio or listening to the mic. - [Fatia](https://vibecode.thmtecnologia.com/en/components/fatia/): A waveform with two handles to pick a section, play it back, add fades and download it as WAV. - [Matinê](https://vibecode.thmtecnologia.com/en/components/matine/): A player with a progress bar, hover thumbnails, chapters, captions, playback speed and fullscreen. - [Película](https://vibecode.thmtecnologia.com/en/components/pelicula/): An editing timeline with clips you drag, trim and split, plus a preview that shows the result instantly. - [Atol](https://vibecode.thmtecnologia.com/en/components/atol/): A black pill at the top of the screen that grows and reshapes to show music, a call, an alert or a timer. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).