# Sarau Player de podcast com capítulos na barra e uma transcrição que destaca e rola a frase que está tocando. > Sarau é um componente exclusivo do THM Componentes com a interface completa de um episódio: transcrição que destaca e rola a frase atual, clique na frase para pular até ela, capítulos na barra, velocidade, pular 15 segundos e atalhos de teclado. O episódio de demonstração é sintetizado no navegador, sem arquivo de áudio. - Categoria: Imagem e mídia - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/sarau/ ## Como ele é Parece o player de um aplicativo de podcast dentro da página, sobre um fundo claro. No topo ficam a capa quadrada, o título e o subtítulo do episódio e uma etiqueta com o capítulo atual. Logo abaixo, uma barra fina dividida em segmentos, um por capítulo, se enche com um degradê de índigo a ciano. Depois vêm o botão redondo de tocar, os botões de voltar e avançar 15 segundos e o seletor de velocidade. Embaixo, a transcrição: cada frase mostra quem fala numa etiqueta colorida e o tempo em que começa, e a frase atual fica destacada e centralizada. ## Você pode estar procurando isto se pediu algo assim - “player de podcast com a transcrição acompanhando a fala” - “texto do episódio que vai destacando a frase que está tocando” - “player de áudio com capítulos marcados na barra” - “clicar numa frase da transcrição e o áudio pular para ela” - “aquele player de aplicativo de podcast, só que no meu site” - “colocar o podcast da empresa na página com transcrição acessível” ## Também chamado de podcast player, player de podcast, player de áudio, transcrição sincronizada, synced transcript, audio player, capítulos de áudio ## Quando usar - Página de episódio de podcast de empresa, escola ou instituição - Resumos falados e audiodescrições que precisam de texto acompanhando - Protótipo de produto de áudio antes de ter os arquivos finais - Conteúdo acessível em que a transcrição precisa ficar visível e navegável ## Quando evitar - Quando você precisa tocar um arquivo de áudio real sem adaptar o componente - Listas com muitos episódios na mesma tela, em que um player compacto basta ## Como pedir para a sua IA ```text Crie um player de podcast com transcrição sincronizada: a frase atual fica destacada e rola com o áudio, clicar numa frase pula para ela, capítulos na barra, velocidade e pular 15 segundos. Quero atalhos de teclado, leitor de tela anunciando a posição e rolagem sem animação para movimento reduzido. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Sarau ### Sarau toca o meu arquivo de áudio? Não diretamente. Sarau vem com um episódio de demonstração de pouco mais de um minuto, com duas vozes sintetizadas no navegador que imitam o ritmo da fala sem palavras reais, e uma transcrição fictícia. Para um episódio de verdade, peça à IA que troque a síntese por um elemento de áudio e carregue a sua transcrição com o tempo de cada frase. ### Sarau funciona com teclado e leitor de tela? Sim. Em Sarau, a barra de progresso funciona como controle deslizante e anuncia o tempo e o capítulo, os botões têm rótulos e há atalhos: Espaço toca e pausa, J e L voltam e avançam 15 segundos, e as setas na barra andam 5 segundos. A frase atual da transcrição fica marcada para tecnologias assistivas. ### A transcrição de Sarau rola sozinha? Rola, com a prop autoScroll ligada, que é o padrão. Sarau centraliza a frase atual enquanto o áudio toca e deixa de acompanhar por alguns segundos quando a pessoa rola a transcrição por conta própria. Com movimento reduzido ativado no sistema, o salto até a frase acontece sem rolagem suave. ## Componentes relacionados - [Pandeiro](https://vibecode.thmtecnologia.com/componentes/pandeiro/): Um disco cercado de barras que dançam com o som, ou linhas em ondas, tocando um som ambiente ou ouvindo o microfone. - [Fatia](https://vibecode.thmtecnologia.com/componentes/fatia/): Uma forma de onda com duas alças para escolher o trecho, ouvir o recorte, aplicar fades e baixar em WAV. - [Matinê](https://vibecode.thmtecnologia.com/componentes/matine/): Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. - [Película](https://vibecode.thmtecnologia.com/componentes/pelicula/): Linha do tempo de edição com clipes que você arrasta, apara e divide, e um preview que mostra o resultado na hora. - [Atol](https://vibecode.thmtecnologia.com/componentes/atol/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.