1

首先让我解释一下我来自哪里。 我对 javascript、html 和 css、客户端的东西有很好的掌握。像 php 这样的服务器端代码和像 ajax 这样的服务器端代码不是我的强项。从我读过的关于从流点中提取元数据的大部分文章中，都指向这里。 http://www.smackfu.com/stuff/programming/shoutcast.html 然后有人说，只用php和ajax！这不是很有帮助或直接，因为我只是把两者都捡起来。我还没有真正了解标头和使用 get 请求，所以我对这种方法不知所措。

我还找到了一篇文章，上面说要查找shoutcast class php，这是迄今为止我发现最有帮助的内容，这就是我现在正在使用的内容。这个假设我知道我正在寻找的流的密码（不理想），但幸运的是我知道。 https://github.com/MaThGo/shoutcast-class/blob/master/shoutcast.class.php

我理解的这两个是不同的，第一个是用于在流中通过元数据时获取元数据的伪代码，第二个只是从网络服务器中提取相同元数据的 xml。

我假设更改类以从 7.html 中提取相同的信息是一个简单的切换，不需要密码。

我最初陷入困境的地方：在稍微修改了上面的广播类脚本之后，我最终将歌曲和流标题放在了一个变量中。我已经将它保存（并对其进行了测试，因此我知道它确实使用 echo 输出了正确的信息）作为 getInfo.php，位于与我的 index.html 文件相同的文件夹中。

<?php //shoutcast class script from above link followed by

$stream = shoutcast("ip","port","pass"); //constructing the class
$streamData = stream.getShoutcastData(); //getting array of shoutcast metadata
$streamTitle = streamData["SERVERTITLE"]; //gets the server's title
$streamSong = streamData["SONGTITLE"]; //gets the current song playing artist and track
$playerText = "You're listening to {$streamTitle} <br> Song: {$streamSong}"
echo $streamTitle;
?>

如果我有一个音频元素和一个 id 为“info”的歌曲信息的 div，我如何运行这个脚本并让它每隔几秒只修改该 div 的内容？显然，我不想消耗大量带宽请求/或获取与以前没有什么不同的元数据。这就是我假设 php 和 ajax 组合的用途。 想通了，再往下看，这是一个糟糕的示例脚本：

<!DOCTYPE HTML>
<html>
<head>
   <script>
       //perhaps something like this?
       function update()
       {
          document.getElementById("info").innerHTML= //not sure what do do here
       }
       //or a function which uses setTimeout()?
   </script>
</head>
<body onload="getThingsStarted()">

   <!--Where the magic should happen-->
   <div id="info">Somewhere in here</div>

   <div id="audio">
      <audio autoplay="true" controls="controls" src="http://ip:port/;">
   </div>

</body>
</html>

已修复：我的原始代码语法错误，因此我的 ajax 代码中的 XMLHttpRequest 从未执行，因此从未返回任何结果（数字）。这就是它的工作原理。

<!DOCTYPE HTML>
<html>
   <head>
   <script>
       //php ajax sample code w/ one slight modification from w3schools.com
       function loadXMLDoc()
       {
          var xmlhttp;
          if (window.XMLHttpRequest)
          {//IE7, Firefox, Chrome, Opera, Safari
             xmlhttp=new XMLHtppRequest();
          }
          else
          {//IE6, IE5 wow these are old
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange=function()
          {
             if(xmlhttp.readyState==4 && xmlhttp.status==200)
             {
                document.getElementById("info").innerHTML=xmlhttp.responseText;
             }
          }
          xmlhttp.open("GET","stream.php?q=1",true);
          xmlhttp.send();
       }
    </script>
    </head>
    <body>
       <div id="info">Stream info</div>
       <audio autoplay controls="controls" src="http://ip:port/;" ontimeupdate="loadXMLDoc()">
    </body>
</html>

第二个问题：我想知道是否有人可以为我指出一个使用第一个链接中的方法提取元数据的好例子，或者修改shoutcast类，使其不需要密码？非常感激。

由于来自服务器的元数据比流提前几秒钟（有意义的广播使用缓冲区，所以音频落后于网络服务器更改的元数据）我很好奇我是否可以比较结果（也许检查有多大服务器和客户端内容之间的时间延迟？）。只是一些想法...

4

1 回答 1

1

你运行的是什么版本的 DNAS？在 2.0+ 中，您应该能够从http://ip:port/statistics. 这是（希望）您尝试使用 JS 完成的一个活生生的例子：http: //subfocus.fm。

为了解决 XMLHttpRequest 中的跨域/端口限制（在这种情况下通常为 80 对 8000），我有一个本地服务器脚本，每分钟运行一次 wget，以将 ShoutCAST XML 文件下载到 Web 服务器根路径（公开：）http://ip/stats.xml。在您的情况下这可能不可行，但我想我会分享我的拼凑解决方案。

只要您的 Web 服务器上有 XML，您就应该能够对单个流站使用类似的东西：

<head>
<script>
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest()
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}
function scMetaData() {
xmlhttp.open("GET", "stats.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("info").innerHTML = "<b>Now Playing:</b> " + xmlDoc.getElementsByTagName("STREAM")[0].getElementsByTagName("SONGTITLE")[0].childNodes[0].nodeValue
}
setInterval(scMetaData, 10000);
</script>
</head>

<body onload="scMetaData();">
<span id="info"></span>
</body>

setInterval(scMetaData, 10000);创建 XMLHttpRequest 对象后，其余部分存储在一个函数中，该函数将在脚本结束时以指定的时间间隔（以毫秒为单位）调用，并且在加载时也会调​​用<body onload="scMetaData();">. 我链接的实时示例添加了一个 FOR 循环来解析 2 个 ShoutCAST 流的 XML 轨道 ID。

于 2013-12-02T21:19:34.153 回答