在 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 属性设置正确，但是当我使用本机控件的播放按钮时，没有任何反应。但是blob很好，可以上传到存储服务器，之后就可以正常听了。

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

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

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

谢谢。

Answer 1

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

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();

如果你的录音很短，你也可以考虑使用 data-URLs 而不是 blobs。

如果你只想让别人听到，你也可以切换到 Web Audio API。

在 cordova 应用程序中播放 MP3 blob

Playback a MP3 blob in a cordova app

javascript

cordova

mp3

html5-audio