如何在断网状态下播放缓存的音频?

Question

如何在断网状态下播放缓存的音频?

发布于
2024-01-30 天津

更新于
2024-05-13

    setaudioBlob(dataurl, name) {
      fetch(dataurl)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.blob();
        })
        .then(blob => {
          let reader = new FileReader();
          reader.onloadend = function () {
            let base64data = reader.result; // 这里得到的是一个"data:*/*;base64,..."格式的字符串
            // 存储到localStorage
            localStorage.setItem(name, base64data);
          };
          reader.readAsDataURL(blob);
        })
        .catch(error => {
          console.error('Error', error);
        });
    },
    getaudioBlob(name) {
      let base64data = window.localStorage.getItem(name)

      // 分离出MIME类型和实际的Base64内容
      let dataParts = base64data.split(';base64,');
      let contentType = dataParts[0].split(':')[1];
      let base64String = dataParts[1];

      // 将Base64字符串转换回Blob
      let decodedData = window.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 });
      return restoredBlob
      // let audioElement = new Audio(URL.createObjectURL(restoredBlob));
      // audioElement.play().catch(error => console.error(error));
    },，我是mp3文件，我理解是只要浏览器能正常播放wav，转化播放应该没啥问题

断网播放声音？

在网络连接的时候加载audio，然后在断网的时候播放音频，希望他走缓存，就很奇怪，有时候可以走缓存，有时候不行，请求接口，但是是脱机状态就请求失败，怎么设定缓存永久，一直走缓存，不重新请求接口
他会走个这个，启动器也看不到

音频处理 javascript 前端

阅读 1.2k

AI BotBETA

音频文件需要在网络连接时加载，并在离线状态下缓存，以备后用。您可以使用一些技术来确保音频文件被正确缓存，并在需要时播放。

一种常见的方法是使用Web存储（Web Storage）技术，如localStorage或sessionStorage。这些存储机制允许您在网络连接时将数据存储在用户的浏览器中，并在离线状态下访问这些数据。

以下是一个简单的示例，演示如何使用localStorage将音频文件缓存起来：

在网络连接时加载音频文件并将其存储在localStorage中：

// 假设音频文件的URL为 "http://example.com/audio.mp3"
var audioUrl = "http://example.com/audio.mp3";

// 加载音频文件
var audio = new Audio(audioUrl);

// 监听音频加载完成事件
audio.addEventListener("load", function() {
  // 将音频数据存储在localStorage中
  localStorage.setItem("audioData", audio.src);
});

在离线状态下检查localStorage中是否存在音频数据，并播放音频：

// 检查localStorage中是否存在音频数据
var audioData = localStorage.getItem("audioData");
if (audioData) {
  // 创建新的音频对象并设置其src属性为缓存的音频数据
  var audio = new Audio(audioData);
  // 播放音频
  audio.play();
} else {
  // 缓存数据不存在，处理离线状态或显示相应的提示信息
}

通过这种方式，您可以在网络连接时将音频文件加载到localStorage中，并在离线状态下播放缓存的音频。请注意，这种方法只适用于较小的音频文件，因为localStorage的存储容量有限。对于较大的音频文件，您可能需要使用其他缓存机制，如IndexedDB或Service Workers。

1 个回答

得票最新

爱看书的红酒

37423

发布于
2024-01-31 天津

✓ 已被采纳

转base64后存localstorage了

撰写回答