web-dev-qa-db-ja.com

HTML5 <audio>タグを使用してストリーミングされたMP3ファイルを検索する

うまくいけば、誰かがこれで私を助けることができます。

オーディオをクライアントにストリーミングするnode.jsサーバーで遊んでいて、HTML5プレーヤーを作成したいと思います。現在、チャンクエンコーディングを使用してノードからコードをストリーミングしています。URLに直接アクセスすると、うまく機能します。

私がやりたいのは、次のようにHTML5 <audio>タグを使用してこれを埋め込むことです。

<audio src="http://server/stream?file=123">

ここで、/streamは、ノードサーバーがMP3をストリーミングするためのエンドポイントです。 HTML5プレーヤーはSafariとChromeで正常に読み込まれますが、シークできず、Safariは「ライブブロードキャスト」とさえ言っています。 /streamのヘッダーに、ファイルサイズとファイルタイプを含めます。応答は適切に終了します。

これを回避する方法について何か考えはありますか？確かにファイル全体を一度に送信することもできますが、プレーヤーはすべてがダウンロードされるまで待機します。ストリーミングしたいのです。

audiohtmlstreamingnode.js
25
Kyle Slattery

サーバーが範囲リクエストを受け入れることを確認してください。Accept-Rangesはヘッダーにあります。 jPlayerでは、これはWebkit（特にChrome）ブラウザーで、進行状況と機能の検索に関して一般的な問題です。

JPlayerを使用していない可能性がありますが、公式Webサイトのサーバー応答情報が役立つ場合があります。

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

6
Dustin Blake

こちらをご覧ください http://www.scottandrew.com/pub/html5audioplayer/ 、これを使用しましたが、ファイルのダウンロード中に再生されます。バッファを少し待ちますが、再生します。しかし、シークを試みたことはありませんが、可能であれば、彼のコードで「aud.currentTime」を設定することから始めます。

幸運を

3
Pieter

しかし、私は同じ問題を抱えていました。メディアファイル応答用にいくつかのヘッダーを設定する必要があります。

例として：

Accept-Ranges:bytes
Content-Length:7437847
Content-Range:bytes 0-7437846/7437847

その後、オーディオタグはシークできるようになります

1
Дмитрий Александрович

Accept-Ranges（ RFC 2616、セクション14.5） 応答ヘッダーを送信していますか？

1
Julian Reschke