来自缓存的 HTML 音频元素源

Question

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

在某种程度上，不自动使用缓存是有道理的，因为这样命名缓存就没有任何意义。

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

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

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

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

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

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

<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 的情况下使用 Cache API。这正是您在提供的代码中所做的。

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

现在，让我们看看问题。如果内容存储在缓存中，您想从缓存中加载它，如果没有，我假设您想从网络加载它。一种解决方案是使用服务工作者。Service Worker 在后台工作，拦截 fetch 事件（如果您将其配置为）。我创建了一个使用这种方法的示例应用程序（源代码）。

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

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

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