HTML 来自缓存的音频元素源

Question

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

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

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

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

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

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

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

None 当然可以，这就是我写这篇文章的原因。 :)

<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 和服务工作者。这些通常一起使用，但不是同一规范的一部分。您可以在没有服务人员的情况下使用缓存 API。这正是您在提供的代码中所做的。

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

现在，让我们来看问题。如果内容存储在那里，你想从缓存中加载内容，如果没有，我假设你想从网络加载它。一种解决方案是使用服务工作者。 service worker 在后台工作，拦截获取事件（如果你配置的话）。我创建了一个使用这种方法的 sample application (Source code)。

像往常一样配置了 src 属性的音频标签。然后我有一个服务人员监听获取事件，检查请求是针对音频文件，然后是 returns 缓存版本或网络版本。我向缓存中的文件 add/remove 添加了按钮，并添加了一个状态字段以查看其是否已添加。不需要删除按钮和状态，但很适合演示。

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

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

HTML 来自缓存的音频元素源

HTML Audio element source from cache

html

javascript

audio

caching

cacheapi