使用 Blob 通过 AJAX/PHP 请求将音频文件流式传输到 HTML 音频元素中？答案

【问题标题】：Stream an audio file into the HTML audio element via AJAX/PHP request with Blob?使用 Blob 通过 AJAX/PHP 请求将音频文件流式传输到 HTML 音频元素中？
【发布时间】：2021-04-22 07:43:59
【问题描述】：

我正在尝试创建一个保护最少的 HTML5 播放器以避免音乐下载。

快速解释：

我有一个数据库，其中包含标题、用于查找我的音乐的哈希。
在我的 HTML 文件中，我的按钮在属性中包含我的哈希值。
所以我通过 JS 检索我的哈希，然后我发出 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';
        }

【问题讨论】：

stackoverflow.com/a/33512389/8595398

标签： javascript php ajax html5-audio audio-streaming

【解决方案1】：

您可以确定您的解决方案不会阻止任何人下载任何内容。只需单击网络选项卡并查看音频文件的 URL（以及其他方法），这很简单。

您的提议提供零保护。

即使它在某些方面确实对您有所帮助，但流式传输的唯一方法是实现代码以使用媒体源扩展，这是一个令人难以置信的麻烦，并且对您的用户没有任何好处。

如果你想保护你的媒体，你能做的最好的就是使用 DRM...但是将音频复制到大多数人不关心加密的程度仍然是微不足道的。

【讨论】：