Question

我正在构建一个Shoutcast音频播放器，其中包含正在播放的歌曲/艺术家的信息。我有两个独立的变量（$ song和$ artist），每次歌曲改变时它们的值都会更新。

以下是代码摘录：

<?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\r\nUser-Agent: Mozilla\r\n\r\n");
    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 -->

我尝试在JavaScript中刷新5秒，但它会影响整个页面（包括播放器）。我想创建一个刷新这些变量而不重新加载整个页面的函数。

Answer 1

您需要的只是问题的标签：JavaScript，PHP和AJAX。

你需要这些东西：

在PHP中创建一个端点，它只返回歌曲/艺术家信息，例如格式化为JSON或XML
使用播放器将JavaScript代码放入您的页面中，该播放器定期（例如，在1或5秒内一次）从第1点调用端点（使用例如JavaScript函数XMLHttpRequest）并替换部分DOM，其中包含歌曲/艺术家信息（可能是带有一些ID的DIV / SPAN）

这就是全部。这两件事合称为AJAX。该缩写最初是指异步JavaScript和XML ，但您也可以使用JSON或纯HTML作为来自端点的响应，而不仅仅是XML。 AJAX不是真实的东西，它只是JavaScript中异步调用技术的昵称。

以最愚蠢的方式：想象一下你的HTML页面中有一个玩家：

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

创建一个JavaScript代码，每1秒执行一次，它将调用您在问题中发布的PHP脚本，该脚本将当前播放的歌曲作为文本返回，没有任何其他内容（只有“艺术家 - 歌曲”）和JavaScript代码将它（覆盖以前的内容）放入span＃now_playing。就是这样。

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

1 个答案: