来自缓存的 HTML 音频元素源

Question

我正在构建一个用于离线播放一些音频文件的 Web 应用程序。我已经阅读并测试了 Service Worker API 的 Cache 部分，我可以轻松地将所有音频文件添加到命名缓存中。但是，当我将 <audio src='/audio/file.mp3'> 添加到 DOM 和 play() 时，浏览器似乎没有使用它，即使该确切的 URL 已添加到缓存中。

从某种意义上说，缓存不会自动使用，因为这样命名缓存就没有任何意义了。

我正在使用 create-react-app，由于我没有弹出，我没有控制 Service Worker。不过，据我了解，不建议预先缓存较大的文件，因此我在 UI 中创建了一个函数，让用户决定何时缓存所有文件。

我的问题是：如何将缓存的音频文件放入音频元素中？

编辑：我认为问题应该可以从我的问题中理解，但被要求添加代码，所以这是我尝试过的。

标记有一个音频元素和两个按钮。第一个按钮将 mp3 url 加载到缓存中，第二个按钮尝试两种不同的方式将其设置为音频元素的源：

1. 从缓存的响应中插入 blob
2. 将缓存的请求url设置为音频源

当然，它们都不起作用，这就是我写这篇文章的原因。 :)

<div>
    <audio src="/audio/shape_of_you.mp3" controls/>
</div>
<div>
    <button onclick="addToCache()">Add to cache</button>
    <button onclick="playCachedAudio()">Play cached audio</button>
</div>


<script>
    function addToCache() {
        caches.open('myCache').then((cache) => {
            cache.add('/audio/rise.mp3').then(() => {
                console.log('cached');
            });
        });
    }

    function playCachedAudio() {
        caches.open('myCache').then((cache) => {
            cache.match('/audio/rise.mp3').then((cachedAudio) => {
                cachedAudio.blob().then(cont => {
                    let audioEl = $('audio');
                    audioEl.attr('src', cont);
                    // ...fails with the following error in console:
                    // HTTP “Content-Type” of “text/html” is not supported. Load of media resource http://localhost:3000/[object%20Blob] failed.
                    // Cannot play media. No decoders for requested formats: text/html
                    audioEl.attr('src', '/audio/rise.mp3');
                    // Works online, but not offline (resource is not found)
                });
            });
        });
    }
</script>

我正在寻找一个

一种将 blob 添加为音频内容的方法

或

另一种以编程方式强制浏览器保证缓存音频文件列表以供离线使用的方法。

Answer 1

这里提到了两个概念。缓存 API 和服务工作者。这些通常一起使用，但不是同一规范的一部分。您可以在没有 Service Worker 的情况下使用缓存 API。这正是您在提供的代码中所做的。

请注意，使用缓存 API 绝不保证文件将永远保留，它仍然是缓存。但是，浏览器似乎会尽力保留文件。

现在，让我们看看问题所在。如果内容存储在那里，您想从缓存中加载内容，如果不是，我假设您想从网络加载它。一种解决方案是使用服务工作者。 Service Worker 在后台工作，拦截 fetch 事件（如果您将其配置为）。我创建了一个使用这种方法的sample application (Source code)。

像你通常做的那样配置了 src-attribute 的音频标签。然后我有一个服务工作者来监听获取事件，检查请求是否是音频文件，然后返回缓存版本或网络版本。我添加了按钮以从缓存中添加/删除文件，并添加了一个状态字段以查看它是否已添加。不需要移除按钮和状态，但很适合演示。

请注意，Service Worker 使用 caches.match(request) 而不指定缓存名称。缓存名称仅用于对缓存项进行分组，以便开发人员维护。它使同时删除/替换许多资源变得更加容易。在开发工具中检查缓存或迭代其项目也更容易。

我无法回答如何将服务工作者添加到您的特定应用程序中。请参阅 create-react-app 的文档。