Como colocar o player da rádio no seu site (widgets prontos)

Seis códigos prontos para colar no site: player HTML5, player com controles, música tocando agora, músicas recentes, links TuneIn e a API por JavaScript. Como testar e copiar cada um.

Como colocar o player da rádio no seu site (widgets prontos)

Não precisa de programador para colocar a rádio no site: a seção Widgets e integração tem códigos prontos. Você testa aqui no painel, copia e cola na página do seu site. Para um player completo e personalizado (cores, logo, programa no ar, compartilhamento), use o Web Player; os widgets são a opção rápida.

Onde fica: Aplicações › sua rádio › Links e Widgets › Widgets e integração.

Seção Widgets e integração com os seis códigos prontos, cada um com os botões Testar e Copiar
(1) Player HTML5 (audio tag); (2) Player com controles JavaScript; (3) Widget "Música tocando agora"; (4) Widget "Músicas recentes"; (5) Widget "Links TuneIn"; (6) Buscar música atual via JavaScript (API).

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

Os seis widgets

  1. Player HTML5 (audio tag) (1) — o player nativo do navegador, o mais simples e compatível. Uma linha de HTML.
  2. Player com controles JavaScript (2) — play/pause e volume com aparência própria, para quem quer estilizar.
  3. Música tocando agora (3) — mostra título e artista atuais, atualizando sozinho.
  4. Músicas recentes (4) — a lista das últimas músicas tocadas.
  5. Links TuneIn (5) — os botões "ouvir no Winamp / Windows Media Player" prontos.
  6. Buscar música atual via JavaScript (6) — não é um widget visual: é o trecho de código que consulta a API e devolve a música atual, para o desenvolvedor montar o que quiser.

Testar antes de copiar

Janela de teste do Player HTML5 com o player de áudio e o botão Fechar
Cada widget tem o botão Testar: ele abre o widget funcionando, com o stream da sua rádio.
  1. Clique em Testar no widget. Abre uma janela com ele funcionando de verdade — no player, dê play e confira o som.
  2. Clique em Copiar. O código vai para a área de transferência já com os endereços da sua rádio preenchidos.
  3. No editor do seu site (WordPress, Wix, HTML puro), cole o código onde o player deve aparecer. Em construtores de site, use o bloco "HTML personalizado" ou "código".

O que fazer se…

  • No site o player aparece mas não toca. Se o site é HTTPS e o widget está com um link HTTP, o navegador bloqueia. Todos os widgets usam o link universal (HTTPS); confira se o código não foi alterado ao colar.
  • "Tocando agora" fica em branco. O título vem do encoder ou do AutoDJ. Veja se ele aparece em Tocando Agora na tela Início.
  • Quero cores, logo e compartilhamento. Isso é o Web Player, que gera um código próprio de incorporação.

Veja também