1

Amigos, saudações a todos... Eu tenho uma dúvida, eu andei pesquisando e não sei se é possível, pois acho que quando procuramos muito alguma coisa ou não é possível ou não estou procurando da maneira correta.

Veja o seguinte, eu tenho um cliente com uma rádio online, a rádio fornece um "XML" que atualiza sempre que muda a música que está tocando, exemplo http://radiovox.conectastm.com/api/MTk0ODArMA==

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<info>
<status>Ligado</status>
<porta>19480</porta>
<porta_dj>46860</porta_dj>
<ip>stm30.conectastm.com</ip>
<ouvintes_conectados>0</ouvintes_conectados>
<titulo/>
<plano_ouvintes>500</plano_ouvintes>
<plano_ftp>50 GB</plano_ftp>
<plano_bitrate>128Kbps</plano_bitrate>
<musica_atual>Gospel_Semeando_Vidas_1</musica_atual>
<proxima_musica>Www.Centraldamidia.Com 81 9637 2063 - Www.Centraldamidia.Com 81 9637 2063</proxima_musica>
<genero>Alternative</genero>
<shoutcast>http://stm30.conectastm.com:19480</shoutcast>
<capa_musica>https://player.srvstm.com/img/img-capa-artista-padrao.png</capa_musica>
</info>

Bem a cada música que o sistema muda esse XML é atualizado, mas eu queria também atualizar a página que está tocando sem recarregar, apenas as informações como "música atual, próxima música e capa"

este é o PHP:

<?php $xml = simplexml_load_file("http://radiovox.conectastm.com/api/MTk0ODArMA==");?>
        <div class="adjstext">

            <div  class="adjst">
            <img src="https://www.studiorural.com.br/wp-content/uploads/2015/06/logo_studio_rural_nova.png" alt="Studiorural Logo">
                <div id="ReloadThis2">
                    <!--<div class="beats"><img src="<?php /*echo $xml->status;echo "Ligado.gif";*/ ?>" class="responsiveimg" alt="Beats Stúdio Rural"/></div>-->
                    <div class="infos">
                        <?php
                        $proxima = $xml->proxima_musica;

                        echo "<div class='alcp'><img src='$xml->capa_musica' alt='Foto da Capa' height='80' width='80' align='left'></div>";
                        echo "<div class='muin'><strong class='strongcolor'>Gênero da Rádio: </strong>$xml->genero <br/>";
                        echo "<strong class='strongcolor'>Agora: </strong> $xml->musica_atual <br/>";
                        if ($proxima == "Recife"){
                            echo "<strong class='strongcolor'>Próxima: </strong> Hora Certa</div>";}
                        else {
                            echo "<strong class='strongcolor'>Próxima: </strong> $proxima</div>";
                        }
                        ?>
                    </div>

                    
                </div>

                <div class="playerfloat">
                        <div class="mediatec-cleanaudioplayer">
                            <ul data-theme="dark">
                                <li data-title="<?php echo $xml->titulo; ?>"data-type="mp3" data-url="https://ssl.srvstm.com:19480/;"></li>
                            </ul>
                        </div>
                </div>

            </div>

          </div>

Link da rádio: https://webradio.studiorural.com.br/?source=mobile

Como podem ver ao entrar, ele carrega as informações, mas quando muda a música não vejo como atualizar a música atual e a próxima!

1 Resposta 1

1

bom dia, tudo bem?

Eu vejo basicamente duas formas de fazer isso:

  1. Separar o PHP do HTML e fazer a requisição por AJAX para atualizar as informações; por exemplo, você pode fazer a requisição a cada 30 segundos para atualizar as informações, nesse caso, estará sempre atualizado com 30 segundos de delay, seria +- assim:

        var autoRefresh = setInterval (function () {
        $.ajax({
            url: 'radio.php', //aqui você vai carregar seu php como você faz hoje
            success: function (response) {
                $('#radio').html(response); //você vai atualizar o o HTML das informações da radio aqui
            }
        });
    }, 30000); // recarrega em um intervalo de 30 segundos; você pode diminuir esse tempo para 10 ou 5s. só fique atento se não irá estressar o serviço

Referência de código: Javascript (load e setInterval)?

  1. A segunda forma seria síncrona, mas nessa situação o próprio serviço de streaming precisa disponibilizar o serviço completo em um iframe, por exemplo, para se auto atualizar ou uma conexão persistente como com NodeJS e Socket.io; mas seu servidor nessa situação também precisaria ter os pré-requisitos para o funcionamento.

Ok? Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .