Refresh page when an XML refreshes (Shout cast)

Question

Friends, greetings to all... I have a question, I have been researching and I do not know if it is possible, because I think that when we look for something too much it is not possible or I am not looking for the right way.

See the following, I have a client with an online radio, the radio provides an "XML" that updates whenever it changes the music that is playing, example 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>

Well every song that the system changes this XML is updated, but I also wanted to update the page that is playing without reloading, only information like "current music, next song and cover"

this is 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>

Radio link: https://webradio.studiorural.com.br/? source=mobile

As you can see when you log in, it loads the information, but when it changes the music I don’t see how to update the current song and the next one!

Answer 1

Good morning, all right?

I see basically two ways to do this:

1. Separate PHP from HTML and make the request by AJAX to update the information; for example, you can make the request every 30 seconds to update the information, in which case it will always be updated with 30 seconds of delay, it would be +- so:

        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

Code reference: Javascript (load e setInterval)?

2. The second way would be synchronous, but in this situation the streaming service itself needs to provide the full service in an iframe, for example, to auto-update or a persistent connection as with Nodejs and Socket.io; but your server in this situation would also need to have the prerequisites for operation.

Okay? I hope I helped.