まず、私がどこから来たのかを説明させてください。 私は、javascript、html、および css、クライアント側のものをよく理解しています。php のようなサーバー側のコードや、ajax のようなサーバー/クライアント コードは、私の得意分野ではありません。ストリームポイントからメタデータを抽出することについて読んだすべての記事のほとんどから、ここまで。 http://www.smackfu.com/stuff/programming/shoutcast.html そして誰かが言うには、php と ajax を使えばいいだけだ! 私は両方を手に入れたばかりなので、あまり役に立ちませんし、直接的でもありません。ヘッダーと取得リクエストの使用についてはまだ何も学んでいないので、この方法で途方に暮れています。
また、shoutcast クラスの php を検索するように書かれた記事も見つけました。これは私がこれまでで最も役に立ったと感じたものであり、現在取り組んでいるものです。これは、探しているストリームへのパスワードを知っていることを前提としています (理想的ではありません) が、幸運にも知っています。 https://github.com/MaThGo/shoutcast-class/blob/master/shoutcast.class.php
私が理解しているこれらは両方とも異なります.1つ目はストリーム内を通過するときにメタデータを取得するための擬似コードであり、2つ目は同じメタデータのxmlをWebサーバーからプルするだけです.
クラスを少し変更して、代わりに 7.html から同じ情報を取得するのは簡単なスイッチだと思います。パスワードは必要ありません。
私が最初に立ち往生した場所：上記のshoutcastクラススクリプトを少し変更した後、曲とストリームのタイトルが変数になりました。index.html ファイルと同じフォルダーに getInfo.php として保存しました (テストしたので、echo を使用して正しい情報が出力されることがわかりました)。
<?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>
2番目の質問:最初のリンクのメソッドを使用してメタデータを抽出する良い例、またはパスワードを必要としないようにshoutcastクラスを変更する良い例を教えてもらえないでしょうか? とても有難い。
サーバーからのメタデータはストリームより数秒進んでいるので (shoutcast はバッファを使用するので、オーディオは Web サーバーの変化するメタデータの背後にあります)、結果を比較できるかどうか知りたいです (おそらく、サーバーとクライアントのコンテンツ間の時間遅延?) ほんの少しの考え...