🎶 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicry4NHoQr6b8dxLwsLWPB5AkKaWojE4Zdc-PBAdAF6lh5js4IyzTFxn4vKpGW5CuC1dpvvLcUZ_cBiX5QfacyoGyBvhFBsutjMTeUyRrdRs7JlUTOAIheaYAkJ9AgQvcWHVLuGmUCo4ze/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:

• Player de áudio com HTML puro
• Player de vídeo com HTML puro

Até mais!