Como criar o Web Player da rádio

O Web Player é o player "de marca" da sua rádio: uma página com a sua logo, as suas cores, o slogan, os links das redes, a música tocando e o botão de compartilhar. Você pode usá-lo como página própria (o painel dá um endereço público) ou embutir no seu site por iframe ou script. Dá para criar mais de um: um para o site, outro em popup, outro como botão flutuante.

Onde fica: Aplicações › sua rádio › Web Player.

Página Web Player sem players criados, com o botão Novo Player — (1) Novo Player: abre o editor.

Os números entre parênteses no texto são os da imagem.

1. Crie o player e escolha o tipo

Editor do Web Player com o tipo de player, as abas, os campos da aba Geral e a pré-visualização ao lado — (1) Tipo de Player; (2) as abas de configuração; (3) Nome desta Configuração; (4) Nome da rádio e cor; (5) Slogan e cor; (6) a pré-visualização, que atualiza conforme você edita; (7) Salvar Player.

Clique em Novo Player (1 da primeira imagem).
Em Tipo de Player (1) escolha: Popup / Página completa (uma página inteira, com fundo, para abrir em nova janela ou usar como site da rádio), Mini Embed (só a barra do player, sem rodapé, para embutir no site) ou Widget / Botão flutuante (um botão que fica no canto do site e abre o player).
Nome desta Configuração (3) é só para você identificar na lista. Nome (4) e Slogan (5) aparecem no player; o quadradinho ao lado de cada um define a cor do texto. Abaixo, as cores Principal e Secundária do player e o Label de Ouvintes (a palavra ao lado do número de ouvintes).
A URL do streaming usada pelo player já vem preenchida com o link universal da rádio.
Acompanhe o resultado na Pré-visualização (6); Atualizar Preview no topo força a atualização, e Simular Popup abre como o ouvinte verá.

2. Mídia: logo e fundo

Aba Mídia com o upload da logomarca e da imagem de fundo — (1) a aba Mídia; (2) Logomarca; (3) Imagem de Fundo.

Na aba Mídia (1), envie a Logomarca (2) — PNG transparente, mínimo 200×200 px; aparece no player e como ícone — e a Imagem de Fundo (3) do player de página completa (JPG, 1920×1080 ou maior). Sem imagens, o player usa só as cores.

3. Conteúdo, Social e Contato

Aba Conteúdo com frases animadas, textos de compartilhamento e os interruptores de programa, apresentador, música, capa e ouvintes — (1) a aba Conteúdo; (2) campo da frase animada e (3) Adicionar frase; (4) título e (5) descrição ao compartilhar; (6) Exibir programa em andamento; (7) Exibir foto do apresentador; (8) Exibir música tocando; (9) Exibir capa do álbum; (10) Exibir quantidade de ouvintes.

Frases animadas (2 e 3): frases curtas que alternam no player ("Ouça ao vivo 24h!", "Peça sua música"). Cada uma com a própria cor.
Título (4) e descrição ao compartilhar (5): o que aparece quando alguém manda o link do player pelo WhatsApp ou Facebook.
Os interruptores (6 a 10) ligam e desligam o que o player mostra: programa em andamento e foto do apresentador (dependem de Programação e Apresentadores), música tocando, capa do álbum e quantidade de ouvintes.

Aba Social com os campos de Facebook, Instagram, Twitter/X, YouTube, TikTok, WhatsApp e os textos de compartilhamento — (1) a aba Social; (2) a (6) os links das redes; (7) WhatsApp; (8) texto de compartilhamento no WhatsApp; (9) título do modal de compartilhar.

Na aba Social, preencha só as redes que quer mostrar (2 a 7): campo vazio não aparece. O texto de compartilhamento (8) é a mensagem pronta que sai quando o ouvinte compartilha no WhatsApp.

Aba Contato com e-mail, telefone e endereço — (1) a aba Contato; (2) e-mail; (3) telefone; (4) endereço.

Em Contato, e-mail (2), telefone (3) e endereço (4) — também só aparecem se preenchidos.

4. Dimensões

Aba Dimensões com largura e altura do iframe — (1) a aba Dimensões; (2) largura; (3) altura do iframe.

A largura (2) e a altura (3) do iframe quando você embute o player no site. Aceita pixels ou porcentagem ("100%", "600px").

5. Salve e publique

Lista do Web Player com o player salvo como rascunho e os botões Editar, Publicar e excluir — (1) Editar; (2) Publicar; (3) excluir.

Clique em Salvar Player (7 do editor) e depois em ← Voltar. O player aparece na lista como Rascunho: ele existe, mas ainda não tem endereço público. Clique em Publicar (2).

Player publicado na lista, com a URL pública, o botão Copiar e o botão Despublicar — (1) a URL pública do player; (2) Copiar; (3) Despublicar.

Publicado, o card mostra a URL pública (1) — a página do player, pronta para divulgar — e Despublicar (3) tira do ar sem apagar.

6. Pegue o código para o site

Bloco Códigos de Incorporação com a URL pública, o código embed e o script JS — (1) URL pública; (2) código embed (iframe); (3) script JS.

Com o player publicado, abra Editar: no fim do formulário aparece Códigos de Incorporação. Copie o código embed (2) para colar num bloco HTML do seu site (usa as dimensões da aba Dimensões) ou o script JS (3), que é o jeito de colocar o botão flutuante. A URL pública (1) serve para links diretos e para as redes.

O que fazer se…

Mudei algo e o site continua igual. Salve o player e recarregue a página do site; se o site tem cache, limpe.
Quero dois players diferentes. Crie outro com Novo Player: cada um tem a própria configuração, endereço e código.
Preciso de anúncios ou dos links dos apps. Veja Como colocar anúncios e links dos apps no Web Player.

Como criar o Web Player da sua rádio e publicar no site