今日、ラジオのあるページに現在のトラックと基本情報を表示するという問題に直面しなければなりませんでした。
表示する最良の方法を探して、Icecastステータスページを愚かに解析する不気味なPHPスクリプトを見つけました。 さらに、インターネットラジオに関するフォーラムの1つで、非常に興味深い質問に遭遇しました-「なぜあなたは私の息を引いているのですか？」。 本当に、なぜですか？
そして、JSON形式でステーションに関する情報を作成すると同時に、すべてのアイデアを共有することにしました。
したがって、これに必要なものは次のとおりです。サーバー自体、IcecastのXSLTファイル、データを解析するためのJSスクリプト、および1つのPHPファイル（後で説明します）。
ステップ1：Icecastをカスタマイズする
Icecast2サーバーでは、ステーション情報を表示するカスタムXSLファイルを作成できます。 ところで、基本的なページもこの形式で書かれています。まず、Icecastがファイルを探している場所を見つけます。 このパスは設定ファイルに登録されています（デフォルトでは/ usr / share / icecast2です）。
/ usr / share / icecast2 / wwwディレクトリに移動し、そこにinfo.xslファイルを作成します。これは、マウントポイントに関する情報を提供するファイルです。
試行錯誤を使用して、名前付きオブジェクトとして表されるマウントポイントに関する情報を含む有効なJSONコードを生成するXSLTファイルをコンパイルしました。
更新： Habrahabrパーサーはコードを少し台無しにしました。 修正されたようです。
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" > <xsl:output omit-xml-declaration="yes" method="text" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="no" encoding="UTF-8" /><xsl:strip-space elements="*"/> <xsl:template match = "/icestats" > {<xsl:for-each select="source"> "<xsl:value-of select="@mount" />": { <!-- --> "name" : "<xsl:value-of select="server_name"/>", "listeners" : "<xsl:value-of select="listeners" />", "description" : "<xsl:value-of select="server_description" />", "title" : "<xsl:value-of select="title" />", "genre" : "<xsl:value-of select="genre" />", "url" : "<xsl:value-of select="server_url" />" }<xsl:if test="position() != last()"><xsl:text>,</xsl:text></xsl:if> <!-- , , - --> </xsl:for-each> } </xsl:template> </xsl:stylesheet>
情報を取得するには、
example.com:8000/info.xsl
：
example.com:8000/info.xsl
/
example.com:8000/info.xsl
形式でサーバーに
example.com:8000/info.xsl
これに応じて、既存のすべてのマウントポイントに関する構造化された情報を取得します。 私の場合、次のようになります。
{ "/ns": { "name" : "Nyan-nyan :3", "listeners" : "3", "description" : "This is sparta~", "title" : "Freaking On Shpongle - Dorset Perception Remix", "genre" : "Kircore", "url" : "http://*********.com" } }
ステップ2：プロキシを設定する
情報を生成しましたが、問題はJavaScriptを使用して別のドメインやポートにアクセスできないことです。 関係ありません。このようなアダプタースクリプトを作成します。 <?php $s = file_get_contents("http://example.com:8000/info.xsl"); echo($s); ?>
PHPは、定期的に要求、解析、必要なデータを引き出してから情報を提供するよりも、単に要求して提供する方がはるかに簡単だと思います。 このスクリプトを「get.php」と呼び、サーバー上の便利な場所に置きます。
ステップ3：JavaScriptを構成する
したがって、情報を生成および受信できるようになりました。問題はわずかです。ユーザーに表示します。ここでは、コメントのあるコードに限定します。
// , DOM. - ! function set (id, dat) { var d = document.getElementById(id); d.innerHTML = dat; } function getXmlHttp() // XMLHttpRequest, { var xmlhttp; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function req () // { var xmlhttp = getXmlHttp() xmlhttp.open("GET", "get.php", true); // xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if(xmlhttp.status == 200) processResult(xmlhttp.responseText); // } }; xmlhttp.send(null); } function processResult (res) // { var csRes = eval("(" + res + ")"); // -, jQuery, . , , . var a = []; // , // - (/stream) , , (/ns). if (csRes["/stream"] != null) // ? { a = csRes["/stream"]; // , set("sName", " "); // "" } else // - { a = csRes["/ns"]; set("sName", "Non-Stop ( )"); // "" } set("trackholder", a["title"]); // // (, - , ..) set("sGenre", a["genre"]); set("sListeners", a["listeners"]); set("sDescr", a["description"]); setTimeout("req()", 15000); // , 15 // setInterval setTimeout, icecast . } req(); //
ステップ4：ページ設定
すべてがそれと同じくらい簡単です。 ページを構成し、上記のスクリプトで使用されている名前でdiv要素を設定し、これらの要素がスクリプトへのリンクを指定した後 ： ... <div id="sDescr"> </div> <script type="text/javascript" src="./track.js"></script>
まとめ
そして、最終的には、サーバーの負荷が低くなり、情報を出力するためのよりポータブルな形式になります（たとえば、ステーションをリッスンするように作成されたモバイルアプリケーション）。 IcecastのXSLTファイルの詳細を知っていれば、この素晴らしいオープンメディアサーバーについて、さらに多くの興味深いことを書くことができます。最後に、現在のトラックに関する情報が記載された素敵なページを取得しました。
トラックのあるラインをクリックすると、ステーション自体に関する情報が表示されます。
この情報はすべて、ページをリロードすることなく更新されます。