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

Question

First let me explain where I'm coming from. 首先让我解释一下我来自哪里。 I've got a great grasp of javascript, html and css, client sided stuff. 我对javascript，html和css和客户端方面有很好的了解。 Server sided code like php and server-client code like ajax are not my strong suits. 服务器端代码（例如php）和服务器客户端代码（例如ajax）不是我的强项。 From most of every single article I've read about extracting the metadata from the stream points to here. 从每一篇文章的大部分中，我都读到了有关从流点提取元数据的信息。 http://www.smackfu.com/stuff/programming/shoutcast.html And then someone says, just use php and ajax! http://www.smackfu.com/stuff/programming/shoutcast.html然后有人说，只需使用php和ajax！ It's not very helpful or direct since I'm just picking up both. 这不是非常有帮助或直接的，因为我只是兼而有之。 I've yet to learn anything really about headers and using get requests so I'm at a loss with this method. 我还没有真正了解任何有关标头和使用get请求的知识，因此我对这种方法不知所措。

I also found an article which said to look up shoutcast class php, this is what I've found most helpful so far, and this is what I'm working with now. 我还找到了一篇文章，查找了shoutcast类php，这是到目前为止我发现最有用的东西，这也是我现在正在使用的东西。 This one assumes I know the password to the stream I'm looking for (not ideal) but luckily I do. 这个假设我知道我要查找的流的密码（不理想），但是幸运的是我知道。 https://github.com/MaThGo/shoutcast-class/blob/master/shoutcast.class.php https://github.com/MaThGo/shoutcast-class/blob/master/shoutcast.class.php

Both of these I understand are different, the first is pseudo code for grabbing metadata as it passes by in the stream, the second is just pulling xml of the same metadata but off of the webserver. 我理解的这两种都是不同的，第一个是用于获取流中流过的元数据的伪代码，第二个是从网络服务器中提取具有相同元数据的xml。

I'm assuming it'd be an easy switch to change the class a bit to pull the same information from the 7.html instead, no password would be required. 我假设稍微改变一下类以从7.html提取相同的信息将是一个容易的开关，而不需要密码。

Where I was originally stuck: after modifying the above shoutcast class script a bit I end up with the song and stream title in a variable. 我最初遇到的地方：在修改了上面的shoutcast类脚本之后，我最终在一个变量中获得了歌曲和流标题。 I've saved it (and tested it so I know it does output the right info using echo) as getInfo.php in the same folder as my index.html file. 我已经将它保存（并测试了它，所以我知道它确实使用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;
?>

If I have an audio element and a div for the song information with an id "info" how can I run this script and have it only modify the content for that div every couple of seconds? 如果我有一个音频元素和一个ID为“ info”的歌曲信息的div，如何运行此脚本，让它每隔几秒钟仅修改该div的内容？ Obviously I don't want to eat a ton of bandwidth requesting / or getting metadata that is not different than before. 显然，我不想吃大量的带宽来请求/或获取与以前没有不同的元数据。 This is what I'm assuming the php and ajax combination is for. 这就是我所假设的php和ajax组合的用途。 Figured this out, look further below, this is a terrible example script: 弄清楚了，下面进一步看，这是一个可怕的示例脚本：

<!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>

Fixed: My original code had bad syntax so the XMLHttpRequest inside my ajax code never executed, so no results were ever being returned ( figures ). 修复：我的原始代码语法错误，因此我的ajax代码中的XMLHttpRequest从未执行，因此没有返回任何结果（数字）。 Here's what got it working. 这就是它起作用的原因。

<!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>

Second Question: I'm wondering if anyone can point me to a good example of extracting the metadata using the method from the first link , or a modification of the shoutcast class so it doesn't require a password ? 第二个问题：我想知道是否有人可以指出一个很好的示例，该示例使用第一个链接中的方法提取元数据 ，或者对shoutcast类进行了修改，因此不需要密码 ？ Much appreciated. 非常感激。

Since the metadata from the server is a couple of seconds ahead of the stream (makes sense shoutcast uses a buffer so the audio is behind the webserver's changing metadata) I'm curious if I could compare the results (perhaps check for how large of a time delay between server and clients content?). 由于来自服务器的元数据比数据流提前了几秒钟（合理地说，广播使用了缓冲区，因此音频位于网络服务器不断变化的元数据后面），我很好奇是否可以比较结果（也许检查一下服务器和客户端内容之间的时间延迟？）。 Just some thoughts... 只是一些想法...

Answer 1

What version of DNAS are you running? 您正在运行什么版本的DNAS？ In 2.0+ you should be able to pull an XML output of all public stream statistics from http://ip:port/statistics . 在2.0+中，您应该能够从http://ip:port/statistics提取所有公共流统计信息的XML输出。 Here's a live example of (hopefully) what you're trying to accomplish using JS: http://subfocus.fm . 这是一个（希望）您尝试使用JS完成的实时示例： http : //subfocus.fm 。

To work around cross domain/port restrictions in the XMLHttpRequest (80 vs 8000 in this case typically) I have a local server script running a wget every minute to download the ShoutCAST XML file to the web server root path (publicly: http://ip/stats.xml ). 为了解决XMLHttpRequest中的跨域/端口限制（在这种情况下，通常为80 vs 8000），我有一个本地服务器脚本，每分钟运行一次wget，以将ShoutCAST XML文件下载到Web服务器的根路径（公开： http://ip/stats.xml ）。 This may not be feasible in your case but I thought I'd share my patchwork solution. 在您的情况下，这可能不可行，但我想我会分享我的拼凑解决方案。

As long as you have the XML on your web server, you should be able to use something along the lines of this for a single stream station: 只要您的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>

After creating the XMLHttpRequest object the rest is stored in a function to be called at a specified interval in milliseconds by setInterval(scMetaData, 10000); 创建XMLHttpRequest对象后，其余的信息将存储在一个函数中，该函数将以setInterval(scMetaData, 10000);在指定的毫秒间隔内调用setInterval(scMetaData, 10000); at the end of the script and also upon loading with <body onload="scMetaData();"> . 在脚本末尾，以及在加载<body onload="scMetaData();"> 。 The live example I linked adds a FOR loop to parse the XML track IDs for 2 ShoutCAST streams. 我链接的实时示例添加了一个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