如何在断网状态下播放缓存音频
在需要离线播放音频时，可以使用 base64 编码将音频数据存储在本地，然后断网后使用本地缓存播放。具体步骤如下：
- 加载音频数据：在有网络连接时，使用 fetch api 获取音频数据。
- 转为 base64：使用 filereader 对象将音频数据转换为 base64 格式。
- 存储到本地：将转换后的 base64 数据存储在 localstorage 中，并设置一个唯一的键（例如音频文件名）来引用它。
- 断网播放：断网后，从 localstorage 中获取 base64 数据。
- 解析 base64：分离出 mime 类型和实际的 base64 内容。
- 转换回 blob：将 base64 字符串转换为 blob 对象。
- 创建 audio 对象：使用 blob 对象创建 audio 对象，然后调用 play() 方法播放音频。
例如，可以参考以下代码：
function loadAudio(url) {
fetch(url)
.then(response => response.blob())
.then(blob => {
let reader = new FileReader();
reader.onloadend = function () {
let base64data = reader.result;
localStorage.setItem('audio-cache', base64data);
};
reader.readAsDataURL(blob);
});
}
function playCachedAudio() {
let base64data = localStorage.getItem('audio-cache');
let [contentType, base64String] = base64data.split(';base64,');
let decodedData = atob(base64String);
let arrayBuffer = new ArrayBuffer(decodedData.length);
let uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < decodedData.length; i++) {
uint8Array[i] = decodedData.charCodeAt(i);
}
let restoredBlob = new Blob([uint8Array], { type: contentType });
let audioElement = new Audio(URL.createObjectURL(restoredBlob));
audioElement.play();
} 
