As URL de transmissão das rádios do meu blog:
KISS FM
https://playerservices.streamtheworld.com/api/livestream-redirect/RADIO_KISSFM_ADP.aac
CIDADE 97
https://radio.megadj.com.br/listen/cidade97/radio.mp3
CAPITAL 95
https://stm1.srvif.com:7908/stream
DIFUSORA PANTANAL
https://aovivo.difusorapantanal.com.br/listen/difusora_pantanal/radio.mp3
MEGA 94
https://paineldj5.com.br:20021/stream
Para usar este código:
Substitua todos os NOME_RÁDIO_X pelo nome da sua rádio.
Substitua todos os URL_DA_TRANSMISSÃO_X pela URL de transmissão da rádio.
Este código cria um gadget de rádio estilizado com letras e bordas em verde fluorescente sobre um fundo preto. Se precisar de mais ajustes, estou aqui para ajudar
CÓDIGO:
<!-- Martins King Programas -->
<!doctype html>
<style>
.radio-container {
width: 100%;
max-width: 300px;
margin: 20px auto;
padding: 20px;
border: 2px solid #39FF14;
background-color: black;
color: #39FF14;
text-align: center;
font-family: Arial, sans-serif;
border-radius: 10px;
margin-bottom: 20px;
}
.radio-title {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.radio-player {
width: 100%;
border: none;
outline: none;
}
.indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 10px;
}
.playing {
background-color: #39FF14; /* Verde fluorescente */
}
.not-playing {
background-color: red;
}
.control-button {
display: inline-block;
margin-top: 10px;
padding: 5px 15px;
background-color: #39FF14;
color: black;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-right: 5px;
}
</style>
<div class="radio-container">
<div class="radio-title">
NOME_RÁDIO_1
<div id="status-indicator-1" class="indicator not-playing"></div>
</div>
<audio class="radio-player" id="audio-player-1">
<source src="URL_DE_TRANSMISSÃO_1">
Seu navegador não suporta o elemento de áudio.
</audio>
<button class="control-button" id="play-button-1">▶️ Tocar</button>
<button class="control-button" id="stop-button-1">⏹️ Parar</button>
</div>
<div class="radio-container">
<div class="radio-title">
NOME_RÁDIO_2
<div id="status-indicator-2" class="indicator not-playing"></div>
</div>
<audio class="radio-player" id="audio-player-2">
<source src="URL_DE_TRANSMISSÃO_2">
Seu navegador não suporta o elemento de áudio.
</audio>
<button class="control-button" id="play-button-2">▶️ Tocar</button>
<button class="control-button" id="stop-button-2">⏹️ Parar</button>
</div>
<div class="radio-container">
<div class="radio-title">
NOME_RÁDIO_3
<div id="status-indicator-3" class="indicator not-playing"></div>
</div>
<audio class="radio-player" id="audio-player-3">
<source src="URL_DE_TRANSMISSÃO_3">
Seu navegador não suporta o elemento de áudio.
</audio>
<button class="control-button" id="play-button-3">▶️ Tocar</button>
<button class="control-button" id="stop-button-3">⏹️ Parar</button>
</div>
<div class="radio-container">
<div class="radio-title">
NOME_RÁDIO_4
<div id="status-indicator-4" class="indicator not-playing"></div>
</div>
<audio class="radio-player" id="audio-player-4">
<source src="URL_DE_TRANSMISSÃO_4">
Seu navegador não suporta o elemento de áudio.
</audio>
<button class="control-button" id="play-button-4">▶️ Tocar</button>
<button class="control-button" id="stop-button-4">⏹️ Parar</button>
</div>
<div class="radio-container">
<div class="radio-title">
NOME_RÁDIO_5
<div id="status-indicator-5" class="indicator not-playing"></div>
</div>
<audio class="radio-player" id="audio-player-5">
<source src="URL_DE_TRANSMISSÃO_5">
Seu navegador não suporta o elemento de áudio.
</audio>
<button class="control-button" id="play-button-5">▶️ Tocar</button>
<button class="control-button" id="stop-button-5">⏹️ Parar</button>
</div>
<script>
function setupPlayer(playerId, playButtonId, stopButtonId, indicatorId, sourceUrl) {
const audioPlayer = document.getElementById(playerId);
const statusIndicator = document.getElementById(indicatorId);
const playButton = document.getElementById(playButtonId);
const stopButton = document.getElementById(stopButtonId);
playButton.addEventListener('click', () => {
audioPlayer.src = sourceUrl; // Garante a transmissão ao vivo
audioPlayer.play();
statusIndicator.classList.remove('not-playing');
statusIndicator.classList.add('playing');
});
stopButton.addEventListener('click', () => {
audioPlayer.pause();
statusIndicator.classList.remove('playing');
statusIndicator.classList.add('not-playing');
});
// Adiciona um listener para garantir que a transmissão continue tocando corretamente
audioPlayer.addEventListener('ended', () => {
statusIndicator.classList.remove('playing');
statusIndicator.classList.add('not-playing');
});
}
setupPlayer('audio-player-1', 'play-button-1', 'stop-button-1', 'status-indicator-1', 'URL_DE_TRANSMISSÃO_1');
setupPlayer('audio-player-2', 'play-button-2', 'stop-button-2', 'status-indicator-2', 'URL_DE_TRANSMISSÃO_2');
setupPlayer('audio-player-3', 'play-button-3', 'stop-button-3', 'status-indicator-3', 'URL_DE_TRANSMISSÃO_3');
setupPlayer('audio-player-4', 'play-button-4', 'stop-button-4', 'status-indicator-4', 'URL_DE_TRANSMISSÃO_4');
setupPlayer('audio-player-5', 'play-button-5', 'stop-button-5', 'status-indicator-5', 'URL_DE_TRANSMISSÃO_5');