web-dev-qa-db-ja.com

HTML5を使用してshoutcast / icecastストリームを再生するにはどうすればよいですか？

HTML5を使用してshoutcast/icecastストリームを再生することは可能ですか？

もしそうなら、どのように実装すればよいですか？

html5streamingaudio-streamingshoutcasticecast
26
Cy.

HTTPリクエストの最後にセミコロンを追加します。 IS shoutcastがブラウザの検出を無効にするために定めたプロトコル。このように：

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
47
Nate Sweet

SHOUTcastには大きな問題がありますが、MP3をサポートするはずのChromeでも動作しないことに責任があると思われます。

SHOUTcastは、3種類の応答に対応できます。

  • ネイティブSHOUTcast「ICY」プロトコルストリーミングオーディオ応答。ストリームにアクセスするプレーヤーにicy-metadata: 1ヘッダーが含まれている場合、これを行うことを決定します。

  • iCYがサポートされていないメディアプレーヤー向けの、追加のメタデータなしのプレーンHTTPストリーミングオーディオ応答。

  • 「SHOUTcast D.N.A.S.ステータス」ページおよびウェブインターフェース上の他のページ。

オーディオストリームの代わりにWebページを提供するかどうかをどのように決定しますか？ Webブラウザを使用しているかどうかを推測します。 User-AgentヘッダーがMozilla/...で始まるかどうかを確認します。すべてのWebブラウザーがMozillaであるためですよね？ Jeez、SHOUTcast。

したがって、Chrome=が再生するオーディオストリームをフェッチしようとすると、SHOUTcastはそれがWebブラウザであると見なし（そうです...）、オーディオタグに入れるオーディオストリームの提供を拒否します。代わりに、管理Webページを取得します。

（Safariはicy-metadataヘッダーを渡して問題を回避し、SHOUTcastを具体的にサポートしていると思います。Safariがオーディオまたはビデオを再生しないため、現時点ではテストできません。そのためのQuickTime。

したがって、おそらくフォールバックとしてFlashオーディオプレーヤーを追加する必要があります。

18
bobince
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

これは正常に機能するはずですが、必ず/;は、ストリームURLとポートの後にあります。自動再生が不要な場合は、"autoplay"タグを削除してください。

4
Ruwan Harshana Peiris

はい。しかし、Safariでのみ機能します

    <!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>

原因OperaおよびFirefoxは非フリーコーデックをサポートしていませんでした

3
classless

こちらをご覧ください： html5でshoutcastインターネットラジオストリームを再生することは可能ですか？

3
Werewolve

ブラウザの<audio>タグに関するリダイレクトの問題では、リダイレクトを防ぐために、ストリームURLの最後に「/ stream」を追加してみてください。

例：

動作していません： http://live-radio01.xxxxxx.com/2TJW/mp

動作中： http://live-radio01.xxxxxx.com/2TJW/mp3/stream

0
DanielBLN

MacとPCの両方にストリーミングするために、EasystreamでIcecastを使用しています。スクリプトMP3 Sticky Playerと呼ばれるオーディオプレーヤーを設定します。 swf文書サポートファイルを使用すると、プレーヤーはどちらの場合でも次のようにロードされます。

パソコン

<ul id="playlist" style="display:none;">
        <li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
    </li>
</ul>

マック

<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
            Your browser does not support the <code>audio</code> element.
</audio>

Mp3メタデータから画像を削除したので、Icy-MetaDataを取得する画像ローダーを使用します（正しく実行するには、少なくともPHP 5.4が必要です）。ストリーミングする各プレーヤーの歌。

0
MPG