如何在不使用流密码的情况下使用php和ajax使用shoutcast中的元数据来使html保持最新状态？

Question

首先让我解释一下我来自哪里。 我对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

我理解的这两种都是不同的，第一个是用于获取流中流过的元数据的伪代码，第二个是从网络服务器中提取具有相同元数据的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类进行了修改，因此不需要密码 ？ 非常感激。

由于来自服务器的元数据比数据流提前了几秒钟（合理地说，广播使用了缓冲区，因此音频位于网络服务器不断变化的元数据后面），我很好奇是否可以比较结果（也许检查一下服务器和客户端内容之间的时间延迟？）。 只是一些想法...

Answer 1

您正在运行什么版本的DNAS？ 在2.0+中，您应该能够从http://ip:port/statistics提取所有公共流统计信息的XML输出。 这是一个（希望）您尝试使用JS完成的实时示例： http : //subfocus.fm 。

为了解决XMLHttpRequest中的跨域/端口限制（在这种情况下，通常为80 vs 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);在指定的毫秒间隔内调用setInterval(scMetaData, 10000); 在脚本末尾，以及在加载<body onload="scMetaData();"> 。 我链接的实时示例添加了一个FOR循环来解析2个ShoutCAST流的XML轨道ID。

如何在不使用流密码的情况下使用php和ajax使用shoutcast中的元数据来使html保持最新状态？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-02 21:19:34

如何在不使用流密码的情况下使用php和ajax使用shoutcast中的元数据来使html保持最新状态？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-02 21:19:34

解决方案1
1 已采纳 2013-12-02 21:19:34