關於動態生成的mp3在audio標籤無法拖動的問題
- LoadModule xsendfile_module modules/mod_xsendfile.so
- XSendFile On
- XSendFilePath D:/server
- <?php
- header('Content-Type: audio/mp3');
- header('X-Sendfile: D:\server\wuxiancheng.cn\Audio\S.H.E\612xq.mp3');
- ?>
複製程式碼 方法二:使用伺服器語言模擬斷點續傳支援讓HTML5 audio/video.currentTime生效,以PHP為例。 如果沒有伺服器配置許可權,可以在動態語言中傳送Accept-Ranges: bytes和Content-Range: bytes S-E/FILESIZE兩個響應頭,告訴客戶端它請求的伺服器資源支援斷點續傳,伺服器端接收到客戶端傳送的請求以後,從請求頭拿到需要傳送的內容區間,然後從檔案中讀取指定起止位置的資料傳送到客戶端即可解決HTML5 audio/video使用後端語言動態輸出媒體檔案內容造成的currentTime失效以及無法手動拖動進度條的問題。其中S和E分別是當次請求的起始位置索引和結束位置索引,FILESIZE為代表檔案尺寸的總位元組數。
function downloadmp3($file) { $fileSize = filesize($file); $etag = md5(filemtime($file)); $fp = fopen($file, 'rb'); if (!$fp) { die('Could not open file'); } $start = 0; $end = $fileSize - 1;
if (isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])) { //獲取請求頭中的Range欄位 $range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes=')));
$start = $range[0]; if ($range[1] > 0) { $end = $range[1]; }
//構造斷點續傳響應頭 header('HTTP/1.1 206 Partial Content'); header('Status: 206'); header('Accept-Ranges: bytes'); header('Content-Range: bytes ' . $start. '-' . $end . '/' . $fileSize); header('Content-Length: ' . ($end - $start + 1)); } else { header('Content-Length: ' . $fileSize); }
header('Content-Type: audio/mpeg'); header('Last-Modified: ' . date('D, d M Y H:i:s \G\M\T', filemtime($file))); header('ETag: "' . $etag . '"'); header('Expires: 0');
if ($start > 0) { fseek($fp, $start); //移動檔案指標 }
$bytesPosition = $start; while (!feof($fp) && $bytesPosition <= $end) {
$chunk = 1024 * 1024 * 50; //每次讀取50k if ($bytesPosition + $chunk > $end + 1) { $chunk = $end - $bytesPosition + 1; }
$chunk = fread($fp, $chunk); if (!$chunk) { die('Could not read file'); }
print($chunk); flush();
$bytesPosition += $chunk; }
fclose($fp); }