AJAX 每 5 秒更新一次查询以输出 Icecast 服务器的专辑封面

Question

一些背景：

我在 Windows 计算机上安装了 Icecast 2.4.3 运行。我制作了一个 "Now Playing" xsl 文件，它位于 Icecast 的 "web" 目录中。文件中当前正在播放的歌曲的示例如下所示：

getMusic({
    "/stream":{
        "server_name":"Radio",
        "title":"Jack Johnson - Crying Shame"}
    });

在我的网页上，我有一个超时功能，它会自动将艺术家和歌曲标题更改为 ID 为 "track-title2" 的 a。这个脚本看起来像这样：

<script>
function updateTitle() {
    $.ajax({
        type: 'GET',
        url: 'https://radio.domain.com/np.xsl',
        jsonpCallback: 'getMusic',
        dataType: 'jsonp'
    }).then(function (data) {
        var $track = $('#track-title').text(data['/stream'].title);
    }).fail(function (e) {
        console.log(e);
    }).always(function () {
        setTimeout(updateTitle, 5000);
    });
}
$(updateTitle);
</script>

一切正常...

现在，我想通过访问 LAST.FM API 添加专辑封面来提升我的网页。此函数位于另一个名为 "loadme.php".

的单独 PHP 文件中

问题：

我似乎无法弄清楚如何解析我的 AJAX GET 请求（在此示例中）输出到屏幕 Jack Johnson - Crying Shame。我需要获取“-”之前的所有字符，同样，将“-”之后的所有字符放入两个 PHP 变量中，即 $artist 和 $title（分别）。

由于艺术家和标题也可能发生变化，因此我希望此调用类似于上面的脚本。

我的index.php中的PHP调用：

<?php
echo '<img id="albumart" style="text-align:center;" src="';
echo LastFMArtwork::getArtwork('Jack Johnson', 'Crying Shame', true, "small");
echo '">';
?>

我显然已经对标题进行了硬编码以确保 API 是正确的...它是正确的并且专辑封面确实显示在我的网页上。

请帮忙： 开发一个 JSON AJAX 脚本，每 5 秒更新一次，调用 PHP 函数 "LastFMArtwork::getArtwork" 但可以将艺术家和标题解析为两个 PHP 变量。 and/or 任何帮助 非常感谢。

谢谢。

Answer 1

因此，在 Brad 的一些（好吧一堆）指导下，我能够使用 SSE（服务器发送事件）和 AJAX 的混合体。

我的 index.php 页面：

<!DOCTYPE html>
<html xml:lang="en" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#">
 <head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="apple-touch-icon" href="apple-touch-icon.png" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="description" content="Person's personal and professional radio station. ***Contains explicit content***">
  <meta name="keywords" content="icecast,radio,internet radio,station,mediamonkey">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
  <meta property="og:url" content="https://radio.domain.com" />
  <meta property="og:image" content="https://radio.domain.com/ogimage.png" />
  <meta property="og:site_name" content="Radio" />
  <meta property="og:description" content="Person's personal internet radio station" />
  <title id="track-title"></title>
  <style>
   html{width:100%;}
   body{background-color:#bfbfbf; text-align:center; font-family:Helvetica;}
   #wrapper{position:absolute; width:300px; height:450px; max-width:550px; max-height:700px; left:50%; transform:translate(-50%,0); -ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); margin-right:-50%; text-align:center; box-shadow:1px 1px 20px 5px #4d4d4d;}
                        #albumart{position:relative; text-align:center; box-shadow:1px 1px 20px 5px #4d4d4d;}
   #radio{position: relative;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
function updateTitle() {
 $.ajax({
  type: 'GET',
  url: 'https://radio.domain.com/np.xsl',
  jsonpCallback: 'parseMusic',
  dataType: 'jsonp'
 }).then(function (data) {
  var $track = $('#track-title').text(data['/stream'].title);
  var text = $track.text();
  $track.text(text.replace(" - MediaMonkey",""));
 }).fail(function (e) {
  console.log(e);
 }).always(function () {
  setTimeout(updateTitle, 12500);
 });
}
$(updateTitle);
function sendRequest(){
    $.ajax({
     type: 'GET',
        url: 'https://radio.domain.com/getalbum.php',
        success: function(data){
                document.getElementById("art").innerHTML = data;
  console.log(data);
                setTimeout(function(){
                    sendRequest();
                }, 10000);
        }});
};
$(sendRequest);
</script>
</head>
<body>
        <div id="wrapper">
        <h2>Live Radio</h2>
        <span id="art"></span>
        <audio id="radio" controls src="https://radio.domain.com/stream" type="audio/mp3"></audio>
        </div>
</body>
</html>

从 AJAX (getalbum.php) 调用的我的 SSE 页面:

<?php
require_once("lastfm.php");
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$exe = curl_init();
curl_setopt($exe, CURLOPT_URL, "https://radio.domain.com/np.xsl");
curl_setopt($exe, CURLOPT_HEADER, 0);
curl_setopt($exe, CURLOPT_RETURNTRANSFER, 1);
$raw = curl_exec($exe);
curl_close($exe);
$json = $raw;
//The next 7 lines gets rids of all the "extra stuff" from the np.xsl file
$json = str_replace("\n","",$json);
$json = str_replace("\t","",$json);
$json = str_replace("\"","",$json);
$json = str_replace("({","",$json);
$json = str_replace("\n\t","",$json);
$json = str_replace("parseMusic/stream:{title:","",$json);
$json = str_replace(" - MediaMonkey}});","",$json);
//Find the dash and minus one is the artist!
$artist = substr($json, 0, strpos($json, "-") - 1);
//Find the dash and add 2 and that is the title!
$title = substr($json, strpos($json, "-") + 2, strlen($json));
echo '<h4>'.$artist.' - '.$title.'</br></br>';
echo '<img id="albumart" title="'.$title.'" style="text-align:center;" width="280" height="280" src="';
echo LastFMArtwork::getArtwork("$artist", "$title", true, "extralarge");
echo '"></br>';
flush();

我的实时网站截图： screenshot1

AJAX 每 5 秒更新一次查询以输出 Icecast 服务器的专辑封面

AJAX Update Query every 5 seconds to output album art for Icecast Server

php

jquery

json

xslt

icecast