Leve sua rádio para qualquer lugar: player no site, link e QR Code

Os endereços da sua rádio

Na Visão Geral (Overview) do painel, o quadro Transmissões (Streams) mostra o endereço de escuta, e o quadro Páginas Públicas (Public Pages) traz o link da Página Pública. Na central do cliente, o cartão "Minha web rádio" mostra o endereço de escuta. Veja o que a Visão Geral mostra.

radio.hospedagemsegura.com/station/1123Toque para ampliar

123

Fechar

Na Visão Geral do painel, os quadros Transmissões e Páginas Públicas.

1. 1Endereço de escuta: para players de áudio, aplicativos e o VLC
2. 2Baixar PLS e Baixar M3U: listas que abrem a rádio direto em players de computador
3. 3Página Pública: o link para divulgar (WhatsApp, redes e QR Code)

O player oficial do painel, passo a passo

O painel tem um construtor de player pronto: ele gera um código curto que mostra o player público da estação dentro do seu site, com capa, nome da música e play.

1. Abra o construtor

   No painel: Visão Geral›Páginas Públicas›Incorporar Widgets(em inglês: Overview › Public Pages › Embed Widgets)

   No quadro Páginas Públicas da Visão Geral, clique em Incorporar Widgets. Abre o Construtor de Widgets de Incorporação de Player.

   radio.hospedagemsegura.com/station/1Toque para ampliar

   

   Fechar

2. Escolha o tipo e o tema

   radio.hospedagemsegura.com/station/112Toque para ampliar

   12

   Fechar

   1. 1Tipo de Widget: PlayerTambém há Histórico, Podcasts e Agendamento.
   2. 2Tema: Claro ou Escuro, conforme o fundo do siteNavegador Padrão segue o tema do aparelho do visitante.

3. Ajuste a aparência

   Em Personalização do Player, aba Aparência:

   radio.hospedagemsegura.com/station/1123Toque para ampliar

   123

   Fechar

   1. 1Cor Primária, Cor de Fundo e Cor do Texto: as cores da sua marcaConfira na prévia se o texto continua legível.
   2. 2Mostrar Arte do Álbum: ligado, para mostrar a capa
   3. 3Cantos Arredondados: conforme o estilo do site

4. Escolha o que o player faz

   Aba Funcionalidade:

   radio.hospedagemsegura.com/station/112345Toque para ampliar

   12345

   Fechar

   1. 1Volume Inicial: o volume com que o player começa
   2. 2Reprodução Automática: desligado (recomendado)Os navegadores bloqueiam som automático: veja por que o player não começa sozinho.
   3. 3Mostrar controles de volume: ligado
   4. 4Mostrar Progresso da Faixa: a gosto
   5. 5Mostrar Seleção de Stream: só se a rádio tiver mais de um ponto de transmissão (MP3 e AAC, por exemplo)

5. Defina o formato e o tamanho

   Aba Layout:

   radio.hospedagemsegura.com/station/1123Toque para ampliar

   123

   Fechar

   1. 1Estilo de Layout: Horizontal, Vertical, Compacto ou GrandeCompare na prévia.
   2. 2Largura (px ou %): 100% para ocupar o espaço do site
   3. 3Altura (px): em branco, para a altura padrão de cada estilo

6. Opções avançadas, se precisar

   Aba Avançado. Na dúvida, deixe como está.

   radio.hospedagemsegura.com/station/1123Toque para ampliar

   123

   Fechar

   1. 1Habilitar Popup Player: o player numa janela separada
   2. 2Reprodução Contínua em Todas as Páginas
   3. 3CSS Personalizado

7. Confira e copie o código

   Confira o resultado e cole o código no seu site.

   radio.hospedagemsegura.com/station/1123Toque para ampliar

   123

   Fechar

   1. 1Visualização Ao Vivo: como o player vai ficar
   2. 2Código para Incorporar
   3. 3Copiar para Área de Transferência

   Dica Redefinir tudo para os padrões (Reset All To Defaults) desfaz os ajustes.

Gerador de player

O gerador monta o código sem você abrir o painel. Modelos: oficial (o player público do painel), simples (o player de áudio do navegador) ou com a música tocando (artista e título atuais, lidos da rota pública da rádio, sem senha nem chave).

Colar o código no HTML do site

Cole o código onde o player deve aparecer: no topo da página inicial, numa barra lateral ou numa página "Ouça ao vivo". Um player mínimo, só com HTML:

<audio controls preload="none" src="https://radio.example.com/listen/minha-radio/radio.mp3">
  Seu navegador não toca áudio.
  <a href="https://radio.example.com/listen/minha-radio/radio.mp3">Ouça pelo link</a>.
</audio>

• controls mostra os botões de play e de volume do navegador.
• preload="none" só conecta quando o ouvinte aperta o play: quem só visita a página não ocupa uma vaga de ouvinte.
• Depois de publicar, teste em outro navegador e no celular.

Player no WordPress

• 1. Bloco de HTML personalizadoNa página ou no post, clique no +** (Adicionar bloco), procure **HTML personalizado (Custom HTML) e cole o código do player.
• 2. Visualize e publiqueUse a visualização do próprio bloco, salve e teste o play na página publicada.
• 3. Em todas as páginasEm temas com widgets, adicione o mesmo bloco em Aparência › Widgets (barra lateral ou rodapé). Em temas de blocos, edite o cabeçalho ou o rodapé no editor do site.

HTTPS e conteúdo misto

Site com HTTPS (o cadeado ao lado do endereço) só toca áudio que também chega por HTTPS. Um endereço http://, como os antigos com porta (http://radio.example.com:8000/radio.mp3), é bloqueado como conteúdo misto, e o player fica mudo sem erro claro. Use sempre o endereço que o painel mostra, com https:// e /listen/ no caminho, e nunca troque https por http para tentar resolver. Se a página pública toca e o seu site não, o problema quase sempre é o endereço no código: veja link sem HTTPS.

Por que o player não começa a tocar sozinho

Os navegadores bloqueiam áudio com som que começa sem uma ação do visitante. É regra do navegador, não da rádio, e vale para qualquer player. Por isso, deixe a Reprodução Automática desligada e ponha perto do player um convite como "Aperte o play para ouvir ao vivo".

Se quiser tentar mesmo assim: com a Reprodução Automática ligada, o player dentro de outro site só recebe permissão se o iframe tiver o atributo allow="autoplay", que o código do painel não traz. Você pode acrescentá-lo, como abaixo, mas o navegador ainda pode bloquear. Não prometa som automático; veja autoplay bloqueado.

<iframe src="https://radio.example.com/public/minha-radio/embed?theme=light&autoplay=1" allow="autoplay" title="Player da rádio" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>

Player no celular

• Os players funcionam nos navegadores de celular. O ponto de transmissão padrão da rádio é MP3, que toca no iPhone e no Android; se criar outro ponto, evite Ogg para quem ouve no iPhone, porque o Safari do iOS não toca esse formato.
• No celular, o som também só começa depois do toque no play.
• Com a tela bloqueada ou outro aplicativo aberto, o comportamento varia conforme o aparelho e o navegador: teste num iPhone e num Android.
• Ensine o ouvinte a pôr a página pública na tela inicial: no Chrome do Android, menu › Adicionar à tela inicial; no Safari do iPhone, Compartilhar › Adicionar à Tela de Início.
• No 4G, o ouvinte gasta dados no ritmo do bitrate (consumo por hora). Se falhar só no celular, veja celular não toca.

QR Code para cartazes, balcões e eventos

Aponte o QR Code para a página pública da rádio, não para o endereço .mp3: a página abre o player com o nome da rádio e a música atual em qualquer celular.

• Como gerar: navegadores como o Chrome e o Edge criam o QR Code da página aberta, pelo menu de compartilhar ou pelo botão direito do mouse. Programas de design também geram QR Code a partir de um endereço.
• Sem encurtador nem redirecionamento de terceiros: se o serviço sair do ar, todos os QR Codes impressos param. Um QR Code direto para o endereço da rádio não depende de ninguém.
• Teste antes de imprimir, com dois celulares, no tamanho final e com a luz do local.
• Escreva o endereço embaixo, com uma chamada como "Aponte a câmera e ouça a rádio". Código escuro em fundo claro, com margem livre em volta, facilita a leitura.

WhatsApp e redes sociais

• Compartilhe o link da página pública: ele abre o player direto, sem instalar nada.
• Fixe o link na bio do Instagram, na descrição do canal e na mensagem de saudação do WhatsApp Business.
• Antes de um programa ao vivo, avise com o horário e o link; durante, repita o link para quem chega.
• Com o player no site da rádio, divulgue o site: lá o ouvinte acha também a programação e os contatos.

Música atual, histórico e programação no site

O nome no player vem do título e do artista de cada arquivo, editados em Mídia; playlists em Modo Vinheta não mostram nome. Ao vivo, o nome depende do programa do locutor, e a primeira música de uma entrada ao vivo pode não aparecer (problema conhecido da plataforma do painel): entrar com uma vinheta curta e trocar de faixa contorna.

• Histórico: o widget Histórico (History) mostra as últimas músicas. A quantidade fica em Editar Perfil da Estação, campo Número de Músicas Recentes (Number of Visible Recent Songs).
• Programação: o widget Agendamento (Schedule) mostra as playlists e os locutores com horário marcado; a mesma grade está em Páginas Públicas › Agendamento, um link que você pode divulgar.
• Tocando agora com o seu design: a rota pública https://radio.example.com/api/nowplaying/minha-radio devolve, em JSON, a música atual, se há locutor ao vivo, os ouvintes e as últimas músicas. Não pede chave e aceita chamadas de qualquer site. A resposta fica em cache por cerca de 15 segundos: consultar a cada 30 segundos, como o gerador faz, basta.

now_playing.song.artist   artista da música atual
now_playing.song.title    título da música atual
now_playing.song.art      endereço da capa
live.is_live              true quando há locutor ao vivo
listeners.total           ouvintes conectados agora
song_history              últimas músicas tocadas

Divulgue a programação

• Publique a grade com o widget de Agendamento e mantenha os horários das playlists e dos locutores em dia: a agenda pública só mostra o que tem horário marcado.
• Horários fixos criam hábito: anuncie cada programa sempre no mesmo dia e hora.
• Depois de cada divulgação, veja nos relatórios se a audiência subiu (Estatísticas de audiência).
• Numa transmissão com muita gente ao mesmo tempo, confira se o plano comporta o pico (ouvintes simultâneos).

Segurança: o que nunca vai no código do site

• Nunca coloque no site a senha do painel, a senha de locutor, chaves de API ou qualquer dado de acesso. O player só precisa dos endereços públicos.
• A rota de tocando agora (/api/nowplaying/...) é pública e sem chave. Se alguém disser que precisa de uma chave para mostrar a música atual, desconfie.
• Todo o código de uma página pode ser visto por qualquer visitante.
• Cole só código do painel, do gerador desta página ou de quem cuida do seu site.