首先让我解释一下我来自哪里。我已经很好地掌握了javascript，html和css，客户端的东西。像php这样的服务器端代码和像ajax这样的服务器客户端代码不是我的强项。从我读到的每篇关于从流中提取元数据的大多数文章中都指向这里。http://www.smackfu.com/stuff/programming/shoutcast.html然后有人说，就用php和ajax吧！这不是很有帮助或直接，因为我只是拿起两者。我还没有真正了解标头和使用 get 请求的任何知识，所以我对这种方法不知所措。
我还找到了一篇文章，上面说要查找 shoutcast 类 php，这是我到目前为止发现最有帮助的，这就是我现在正在使用的。这个假设我知道我正在寻找的流的密码（不理想），但幸运的是我知道。https://github.com/MaThGo/shoutcast-class/blob/master/shoutcast.class.php
我理解这两种情况都是不同的，第一个是伪代码，用于在元数据在流中经过时抓取元数据，第二个只是从 Web 服务器中提取相同元数据的 xml。
我假设这是一个简单的开关，可以稍微更改类以从 7 中提取相同的信息.html而是不需要密码。
我最初卡住的地方：在稍微修改了上面的 shoutcast 类脚本后，我最终在一个变量中得到了歌曲和流标题。我已经将它保存（并对其进行了测试，以便我知道它确实使用 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 类，使其不需要密码？非常感谢。
由于来自服务器的元数据比流早几秒钟（shoutcast 使用缓冲区是有道理的，因此音频位于 Web 服务器不断变化的元数据后面），我很好奇是否可以比较结果（也许检查服务器和客户端内容之间的时间延迟有多大？只是一些想法...
你运行的是什么版本的DNA？在 2.0+ 中，您应该能够从 http://ip:port/statistics 中提取所有公共流统计信息的 XML 输出。下面是一个（希望）你尝试使用 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>
创建XMLHttpRequest对象后，其余部分存储在一个函数中，该函数以毫秒为单位，在脚本末尾setInterval(scMetaData, 10000);调用，并在加载<body onload="scMetaData();">时调用。我链接的实时示例添加了一个 FOR 循环来解析 2 个 ShoutCAST 流的 XML 轨道 ID。