sexta-feira, 22 de junho de 2018

🎶 HTML | Player de rádio web com <audio> e <video>

Se você já sabe criar um player de áudio com HTML puro, não há nenhum grande mistério aqui.

Só para relembrar, esse é o código para um player elegante e minimalista que vai tocar um único áudio mp3:

<audio src="http://enderecodoseusite.com/audio.mp3" type="audio/mpeg" controls="controls" loop preload="preload" title="Nome da música - Banda"> <a href="http://enderecodoseusite.com/audio.mp3">Nome da música - Banda</a> </audio>

Resultado com um áudio .mp3:

O que você precisa ter é o link exato do streaming. Não é o arquivo com extensão .pls ou .m3u, mas sim o que tem dentro dele.

Este, por exemplo, é o link de streaming da rádio Smooth Jazz Mix New York:

http://hestia2.cdnstream.com:80/1078_128

Colocando esse mesmo link no código — no lugar do arquivo .mp3 — temos o player da rádio, que você pode incorporar facilmente em outro site:

Aí você acha o player sem graça e quer exibir uma imagem de fundo. Os programadores de verdade vão me esganar agora, mas é só colocar o áudio dentro do elemento <video> e inserir a imagem no background.

<video title='Jazz Cafe' width="680px" controls="controls" preload="preload" style="background:url(https://2.bp.blogspot.com/-imkjLOCDd1o/Wy1q_PGZ6DI/AAAAAAAA7IU/3WrW0ErTyKQWlkTTKHj8v0sFABPDOICoACPcBGAYYCw/s680/banda-sax.jpg)"> <source src="http://radio.wanderingsheep.tv:8000/jazzcafe" type="audio/mpeg" /> </video>

Resultado:

É claro que existem formas mais sensatas de fazer isso, mas nenhuma delas é tão legal quanto enganar o navegador colocando ele para tocar uma rádio dentro do elemento de vídeo. Chrome, Edge, Firefox e Opera: todos os quatro caíram no truque.

Para achar o link de transmissão de uma rádio do Icecast, por exemplo, é só salvar o arquivo .m3u, .xspf ou .pls no seu computador e abrir o mesmo no bloco de notas. Lá dentro você encontra o link do streaming.

Abaixo, por exemplo, o código com os links de transmissão da rádio Hear Me - Very Best of Country:

A mesma rádio você pode ouvir abaixo:

Groove Salad - Soma FM:
Drone Zone - Soma FM:

ATENÇÃO | Não incorpore rádio web em um site público sem autorização dos donos da rádio.

Para autoplay e outras configurações, confira os posts:

Até mais!

Pix meutedio arroba mail ponto com

4 comentários:

  1. Boa tarde! Tenho o link da rádio: http://radioup.top:8010/radio.mp3 faço todo esquema explicado por vocês e o player não funciona :( que poderá ser? Podem me ajudar?

    ResponderExcluir
    Respostas
    1. Como a rádio está funcionando normalmente, provavelmente bloquearam para execução em outro domínio.

      Excluir
  2. Passando para agradecê-la pelas valiosas dicas do player de web rádio e vídeo que funcionaram perfeitamente! O pix vai em breve porque você merece.

    ResponderExcluir
    Respostas
    1. Obrigada pelo comentário. Bom saber que foi útil. Já faz um bom tempo que não dou dicas de HTML por aqui, mas a linguagem mudou pouco, então dicas antigas continuam sendo aplicáveis.

      Excluir

Todos os comentários são moderados pela autora do blog.