javascript - 在 cordova 应用程序中播放 MP3 blob

Question

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

这是一个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' });
  }

但在我的 Cordova 应用程序中，无事可做:无论我尝试什么，我总是无法播放音频。 src attr 设置正确，但是当我使用 native 控件的播放按钮时，没有任何反应。但是 blob 就在那里，它可以上传到存储服务器，然后就可以正确听到。

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

我决定尝试使用媒体cordova插件来录制和播放声音，然后透明地上传录制的blob，但我无法同时使用Media()的麦克风。同时还有 JS 库。

由于我的内存中存在该 Blob (我可以上传它，即使使用 cordova 应用程序)，我怎样才能使其在上传之前可播放？

谢谢你。

Answer 1

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