Stream 通過帶有 Blob 的 AJAX/PHP 請求將音頻文件放入 HTML 音頻元素？

Question

我正在嘗試創建一個 HTML5 播放器，它具有最低限度的保護以避免音樂下載。

快速解釋：

• 我有一個包含標題的數據庫，一個 hash 來查找我的音樂。
• 在我的 HTML 文件中，我的按鈕在屬性中包含我的 hash。
• 所以我通過 JS 檢索我的 hash 然后我發出 AJAX 請求，這個請求將 MP3 文件作為 Blob 返回。

通過音頻文件的直接 URL 的音頻的正常功能允許預加載，但即使緩沖區未完成也可以進行播放。 但是為了防止下載，我必須使用 AJAX 請求。 問題是它會下載完整的文件，然后創建 Blob 並開始播放。

但問題是，如果我的用戶連接不好並且文件大約 10 MB（加載大約 10-15 秒）

所以我希望我的用戶能夠在沒有完成下載整個音樂的情況下開始收聽，但只需要前 20% 就可以開始播放音頻文件。

這是執行 AJAX 查詢的代碼，它將在我的播放器中加載博客響應。

    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'blob';
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    // Decode asynchronously
    request.onload = function ()
    {
        if (request.readyState === 2)
        {
            const url = window.URL.createObjectURL(request.response);
            audio.src = url;
            audio.play();
            document.body.removeChild(div);
        }
        else
        {
            alert('Impossible de lire cet music.');
        }
    }
    request.send();

這里是 AJAX 調用的頁面代碼

$res 包含音樂數據。 為了能夠從服務器獲取文件。

        if ($res)
        {
            // TODO auto extension
            $filename = '../mp3/' . $res['title'] . $res['track_extension'];
            $fsize    = filesize($filename);

            $handle   = fopen($filename, "rb", false, $context);
            $contents = fread($handle, $fsize);
            fclose($handle);

            header('content-type: audio/mpeg');
            header('Content-Length: ' . $fsize);


            echo readfile($filename);
        }
        else
        {
            header('HTTP/1.0 404 Not Found', 404);
            echo '0';
        }

Answer 1

您可以確定您的解決方案不會阻止任何人下載任何內容。 只需單擊網絡選項卡並查看音頻文件的 URL（以及其他方法），這很簡單。

您提出的建議提供零保護。

即使它在某些方面確實對您有所幫助，但流式傳輸的唯一方法是實現代碼以使用媒體源擴展，這是一個令人難以置信的麻煩，並且對您的用戶沒有任何好處。

如果你想保護你的媒體，你能做的最好的就是使用 DRM ......但是將音頻復制到大多數人不關心加密的程度仍然是微不足道的。