Node.js Express サーバーから、Content-Range
ヘッダーとキャッシュ ヘッダーなしでオーディオ ファイルをストリーミングしています。これは最新の Safari では問題なく動作しますが、Chrome では動作しません。
で完全なオーディオファイルをストリーミングするときHTTP 200
、私のヘッダーは
{ 'Content-Length': 4724126,
'Content-Type': 'audio/mpeg',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
'Access-Control-Allow-Headers': 'POST, GET, OPTIONS',
Expires: 0,
Pragma: 'no-cache',
'Cache-Control': 'no-cache, no-store, must-revalidate' }
Chrome と Safari<audio>
タグの両方で動作します。
HTTP 206で部分的なコンテンツをストリーミングすると、ヘッダーが
{ 'Content-Length': 4724126,
'Content-Type': 'audio/mpeg',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
'Access-Control-Allow-Headers': 'POST, GET, OPTIONS',
Expires: 0,
Pragma: 'no-cache',
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Accept-Ranges': 'bytes',
'Content-Range': 'bytes 120515-240260/4724126' }
これにより、またはタグがあったChromeページのエラーが発生しました。<audio>
<video>
ブラウザでストリーミング URL を使用するときに Chrome によって作成された埋め込みメディア タグでさえ機能せず、これにつながった
オーディオ ファイルは、ローカル ファイルを読み取り、Node.js createReadStream
APIを介してファイル読み取りストリームを作成することで提供されます。
var file = fs.createReadStream(path, {start: range[0], end: range[1]});
サーバーのコードをここに投稿しました。
[アップデート]
Chrome が要求/応答についてRange
より厳密であるというわけではありません。Content-Range
したがって、Content-Range
応答にはRange
以前の要求が必要です。典型的なケースは、プレーヤー バーを 2 番目の S にスクラブすることです。API は"Range"
リクエストを送信し、サーバーは「Content-Range」ヘッダーで応答します。私の場合はContent-Range
、通常のリクエストではなく、レスポンスを送信していました"Range"
。Safari が機能するのは、応答の前に要求をstreet-html
厳密に要求する必要がないためです。そのため、応答から「Content-Range」ヘッダーを削除しましたが、機能しません。物語の終わり(!)。"Range"
"Content-Range"
この問題をフォローアップするために、Chromium net-dev フォーラムにもChrome の悪い範囲ヘッダーに投稿しました: Range: bytes=0-