Player de música
O que você vai aprender
- Pra que serve esta section
- Como ela contorna o bloqueio de autoplay com som dos navegadores
- Que o estado (tocando/pausado) é lembrado entre páginas
Pra que serve
✨ Recurso exclusivo deste tema: adiciona um player de música ambiente flutuante, fixo num canto da tela em todas as páginas, com um disco giratório clicável pra pausar/tocar. Pensado pra reforçar a atmosfera da marca (ex: uma playlist de loja física, replicada no site).
💡 Navegadores bloqueiam áudio com som automático sem interação do visitante. Pra contornar isso sem quebrar a experiência, a música começa mutada automaticamente e o som é ativado sozinho assim que o visitante faz qualquer interação (clique, rolagem, toque), sem precisar clicar especificamente no player.
O estado (tocando ou pausado, e o ponto exato da música) é lembrado durante a navegação entre páginas na mesma aba, então o visitante não perde o áudio ao trocar de página, mas ele reinicia se abrir o site numa aba nova.
Como configurar
| Configuração | Pra que serve |
|---|---|
| Ativar player de música | Liga/desliga a section por completo. |
| URL do arquivo de áudio | Link direto pro arquivo de áudio (mp3 ou similar). |
| Volume | Volume inicial de reprodução. |
| Posição | Canto esquerdo ou direito da tela. |
| Imagem do disco | Imagem circular mostrada girando dentro do player (ex: capa de um álbum ou logo). |
| Cor do botão | Cor do botão de play/pause. |
Boas práticas
- Hospede o arquivo de áudio em algum lugar confiável e com boa velocidade de entrega (ex: CDN), um link lento ou instável faz o player falhar silenciosamente.
- Considere o impacto de UX: música de fundo automática pode incomodar parte dos visitantes, o ícone de pausa precisa estar sempre visível e fácil de encontrar (o player já cuida disso, mas vale revisar o contraste da Cor do botão escolhida).