在 Cordova 应用程序中播放 MP3 blob答案

【问题标题】：Playback a MP3 blob in a cordova app在 Cordova 应用程序中播放 MP3 blob
【发布时间】：2023-03-16 03:14:01
【问题描述】：

在我的 webapp 中，用户可以录制他们的声音，然后回放以听到结果。

这是一个 nodejs (meteor) 应用程序，记录是用 Mp3LameEncoder 对象完成的，它允许我获取 MP3 blob。一旦我得到它，我使用 windowURL 来获取 blob url。然后，我将该 url 作为 src 属性添加到我的音频 html5 元素中。在桌面/移动浏览器上，效果很好（在大多数浏览器上）。

input.disconnect();
  processor.disconnect();

  if ( encodingProcess === 'direct' ) {
    if ( finish ) {
      blob = encoder.finish();
      console.log("Stopping and saving", blob);
      t.$('#playback').attr("src", window.URL.createObjectURL(blob));
      //saveRecording(blob);
    } else {
      encoder.cancel();
    }
  } else {
    worker.postMessage({ command: finish ? 'finish' : 'cancel' });
  }

但在我的科尔多瓦应用程序中，无事可做：无论我尝试什么，我总是无法播放音频。 src attr 设置正确，但是当我使用本机控件的播放按钮时，没有任何反应。但是blob很好，可以上传到存储服务器，之后就可以正常听到了。

此外，在我的 cordova 应用程序中，当源来自远程服务器（无论是我的 AWS 存储桶还是我的应用程序服务器上的静态文件）时，我可以使用 <audio> 收听音频。

我决定尝试使用media cordova插件来录制和播放声音，然后透明地上传录制的blob，但是我不能同时为Media()和JS lib使用麦克风.

既然我的记忆中某处有那个 blob（我可以上传它，即使是使用 cordova 应用程序），我怎样才能在上传之前让它可以播放？

谢谢。

【问题讨论】：

标签： javascript cordova mp3 html5-audio

【解决方案1】：

在某些平台上，HTML5 媒体元素无法播放没有元数据的 blob，即不是由 FileReader 或 XHR 创建的 blob。如果是这个原因，一种解决方案可能是将 blob 假下载 (XHR) 作为 blob，然后使用新的 URL：

var xhr = new XMLHttpRequest;
xhr.open("get", yourBlobURL);
xhr.responseType = "blob";
xhr.onload = function () {
   var yourNewBlob = xhr.response;
   audioElement.src = URL.createObjectURL(yourNewBlob)
};
xhr.send();

如果您的记录很短，您还可以考虑使用数据 URL 代替 blob。

如果您只想让人们听到它，您也可以切换到Web Audio API。

【讨论】：