audio.durationはmp3がPHPから提供されたときにSafariでInfinityを返します

Question

したがって、mp3ファイルをhtml5のオーディオタグに送信するPHPスクリプトがあります。問題は、Safariでは、audio.durationタグが機能せず、無限大を返すことです。オーディオのsrcを直接ファイルに設定すると、すべて正常に動作します。しかし、私はユーザーにファイルへのパスを見せたくありません。

とにかく、これは私がPHPからヘッダを送信する方法です。

私は既にcontent-rangesを持っています。それは役に立たなかった。

if (file_exists($filename)) { 
    $fp = fopen($filename, 'r'); 
    $etag = md5(serialize(fstat($fp))); 
    fclose($fp); 
    header("Content-Transfer-Encoding: binary"); 
    header("Content-Type: audio/mpeg"); 
    header('Content-Length: ' . (string)(filesize($filename))); 
    header('Content-Disposition: inline; filename="' . $filename . '"'); 
    header('X-Pad: avoid browser bug'); 
    header('Cache-Control: no-cache'); 
    header('Etag: ' . $etag); 

    //GetContentRange($filelength); 

    readfile($filename); 
    exit; 
} 
else { 
    header($_SERVER['SERVER_PROTOCOL'].' 404 Not Found', true, 404); 
    echo "no file"; 
} 

Answer 1

私は同じ問題を抱えていて、いくつかのヘッダーを追加していました。私のために働くようだ -

header("Pragma: public"); 
header("Expires: 0"); 
header("Content-Type: audio/mpeg"); 
header('Content-Length: ' . $fsize); 
header('Content-Disposition: inline; filename="' . $track2play . '"'); 
header('Content-Range: bytes 0-'.$shortlen.'/'.$fsize); 
header('Accept-Ranges: bytes'); 
header('X-Pad: avoid browser bug'); 
header('Cache-Control: no-cache'); 
header('Etag: ' . $etag); 

$ FSIZEは、ファイルサイズで、$ shortlen = $ファイルサイズ-1 ...サファリ5.1.4にし、新しいiPad上でテスト...

Answer 2

サーバーが範囲要求を有効にする必要があります。これは で確認するのが簡単です。サーバの応答に ヘッダーにAccept-Rangesが含まれているかどうかを確認してください。ほとんどのHTML5ブラウザでは、ダウンロード中に新しいファイル位置 を探すことができるため、サーバーは新しい範囲を に要求する必要があります。

バイト範囲リクエストを受け付けないと、一部の HTML5ブラウザで問題が発生します。 の形式では、ファイルの開始と終了が、その持続時間を知るために、 に読み込まれる必要があるため、ファイルから継続時間を読み取ることができないことがよくあります。 Chromeは、Rangeリクエストがサーバーで有効になっていないと、 の問題が最も多いブラウザになりがちですが、すべてのメディアがロードされるまでには すべてのメディアが閉じるまで、 ブラウザには何らかの問題が発生します最後まで。

Range Requestsを有効にしてメディアを提供するPHPの例については、this postを参照してください。

はまた、私はメディアのローカルキャッシュを無効にするには、サーバの応答を使用して いくつかのHTML5のブラウザで問題が発生する可能性があります

..あなたは No-Cacheを使用している気づきました。これにより、メディアの継続時間 が不明になる可能性があります。

Answer 3

• 今日ほとんどの時間を無駄にしてこの問題を調べ、最後に が解決策を出しました。なぜサファリが の期間を無限に返すのかは非常に興味深いです：Safari はファイルを再生するためにサーバを2回要求しているようです。まず、次のような範囲ヘッダーで範囲 要求をサーバーに送信します（バイト：0-1）。
• サーバがレスポンスを部分コンテンツとして返していない場合に、 がストリーム全体を返した場合、サファリブラウザは audio.durationタグを設定せず、その結果、ファイルを1回だけ再生し、 'もう一度再生してください。

• サーバー側で ヘッダーを確認し、rangeHeaderが含まれている場合はそれを返します。

  String rangeHeader = request.getHeader("Range"); if(rangeHeader != null) { //just return it }