如何使用 JavaScript / jQuery 缓存从 CloudFront 传送的音频文件？

How to cache audio file delivered from CloudFront using JavaScript / jQuery?

我们正在开发一个在线课程网站。
课程有音频和文本（无视频）。
音频文件存储在 Amazon S3 上并通过 AWS CloudFront 传送。

每次用户想要播放课程音频文件时，
网站（服务器端）向 CloudFront 发送请求以获取音频文件。
CloudFront 会将音频文件传送给最终用户（HTTP 响应）。

我们使用JPlayer来播放音频文件。音频文件格式为 MP3

我们面临以下问题：

每次用户点击 play/pause、前进、后退按钮或
跳转到音频播放器的特定位置，
正在向 CloudFront 发送新请求（针对同一音频文件），
所以音频播放器位置重置为 00:00

由于 CloudFront 已将音频文件交付给最终用户，
无需向 CloudFront 生成新请求
每次用户点击音频播放器按钮（play/pause、前进、后退）等

因此，一旦用户从 CloudFront 获取音频文件，
我们要缓存音频文件。

我们如何使用 JavaScript 或 jQuery 将音频文件存储在本地浏览器缓存中？

缓存音频文件应该使用浏览器缓存来完成。

有几种方法可以实现“浏览器缓存”。

非常感谢“stdunbar”分享以下内容link。
此 link 指向一篇提供
的精彩文章不同浏览器缓存解决方案的概述。
https://web.dev/storage-for-the-web/

对于我的用例，音频文件缓存的最佳解决方案是 IndexedDB。

这里有一些关于如何开始使用 IndexedDB (IDB) 的精彩文章：

不同浏览器中的路径位置
IndexedDB location in Windows 8 Application