刷新歌曲标题而不重新加载整个页面

Question

I'm building a Shoutcast audio player with the information of the song/artist being played. I have two separate variables ($song and $artist) and their values are updated every time the song changes.

Here is an extract of the code:

<?php

$ip = "111.111.111";
$port = "9436";

$fp = @fsockopen($ip,$port,$errno,$errstr,1);
if (!$fp) 
    { 
    echo "Streaming offline momentaneamente"; // Displays when sever is offline
    } 
    else
    { 
    fputs($fp, "GET /7.html HTTP/1.0
User-Agent: Mozilla

");
    while (!feof($fp)) 
        {
        $info = fgets($fp);
        }
    $info = str_replace('</body></html>', "", $info);
    $split = explode(',', $info);
    if (empty($split[6]) )
        {
        echo "Streaming offline"; // Displays when sever is online but no song title
        }
    else
        {
        $title = str_replace('\'', '`', $split[6]);
        $title = str_replace(',', ' ', $title);
        $split = explode(' - ', $title);
        $artist = trim($split[0]);
        $song = trim($split[1]);
        }


    }

function truncate($string, $length, $dots = "...") {
    return (strlen($string) > $length) ? substr($string, 0, $length - strlen($dots)) . $dots : $string;
}

?>

<div class="player-item-ref acdc">
    <a class="player-link" href="#">
        <h2>AC/DC</h2>
        <ul><!-- THIS UL CONTAINS THE ITEMS TO BE REFRESHED -->
            <li class="song-title"><?php echo truncate("$song", 35); ?></li>
            <li class="song-artist"><?php echo truncate("$artist", 38); ?></li>
        </ul>
    </a>
</div><!-- /.player-container -->

I tried a 5 seconds refresh in JavaScript but it affects the whole page (including the player). I would to make a function which refresh these variables without reloading the whole page.

Answer 1

All you need is in your question's tags: JavaScript, PHP and AJAX.

You need this things:

1. create an endpoint in PHP, which returns just song/artist information, for example formatted in JSON or XML
2. put JavaScript code in your page with the player, which periodically (for example once in 1 or 5 seconds) calls endpoint from point 1 (using for example JavaScript function XMLHttpRequest) and replace part of DOM, which contains song/artist information (probably DIV/SPAN with some ID)

That's all. That two things together are called AJAX. That abbreviation originally means Asynchronous JavaScript and XML, but you can use also JSON or plain HTML as response from your endpoint, not just XML. AJAX isn't a real thing, it's just a nickname for technique of asynchronous calls in JavaScript.

In a dumbest way: imagine you have this in your HTML page with a player:

<div>Now playing: <span id="now_playing"></span></div>

Create a JavaScript code, which will be executed each 1 second, it will call PHP script you have posted in your question, which returns currently played song as text without any other content (just "Artist - Song") and JavaScript code will put it (overwrite previous content) into span#now_playing. That's all.