Question

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

这是一个nodejs（流星）应用程序，并且记录是使用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已正确设置，但是当我使用本机控件的播放按钮时，没有任何反应。但blob很好，它可以上传到存储服务器，并在之后正确听到。

此外，在我的cordova应用程序中，当源来自远程服务器时，我能够使用<audio>收听音频（这是我的AWS桶或我的应用服务器上的静态文件）。 / p>

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

因为我的内存中存在某个blob（我可以上传它，即使使用了cordova应用程序），如何在上传之前使其可播放？

谢谢你。

Answer 1

在某些平台上，HTML5媒体元素无法播放没有元数据的blob，即不是由FileReader或XHR创建的。如果这是原因，一个解决方案可能是伪造下载（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();

如果你的录音很短，你也可以考虑使用数据网址而不是blob。

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

在cordova应用程序中播放MP3 blob

1 个答案: