无法使用 XMLHttpRequest 绘制音频文件的波形

Question

这是场景：

• 我正在使用 cordova 的媒体插件录制音频文件，并将录制的文件保存为 myRecordingPath 在应用程序的文档目录中。文件系统有以下路径：

  */var/mobile/Applications/B2EA8890-E5AA-4273-83C4-EB4CA045EA/Documents/
  2192014125156.wav*
  

• 现在我正在以不同的视图加载相同的录制文件，以使用 Cordova 的媒体插件播放录制文件（再次）。很好玩。

• 我还想显示同一个文件的波形，所以我使用 Chris Wilson's audio-buffer-draw 库。我在 chrome 中测试了相同的结果，但在我的应用程序中，它不起作用。

• 我正在尝试按如下方式传递录制的文件：

  var audioSource = 'file://'+myRecordingPath;
  
  function initAudio() {
  
      var audioRequest = new XMLHttpRequest();
      audioSource.crossOrigin='anonymous';
      audioRequest.open("GET", audioSource, true);
      audioRequest.responseType = "arraybuffer";
      audioRequest.onload = function() {
      audioContext.decodeAudioData( audioRequest.response,
                               function(buffer) {
                               var canvas = document.getElementById("wave");
                               drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffer );
                               } );
                            }
                 audioRequest.send();
           }
  

音频播放正常，但波形未加载到画布中。

和相对路径有关系吗？

我什至使用过WaveSurfer.js 和Shore.js，但它们都使用相似的概念并产生相同的结果。结果是：没有创建波形。

请指导。

Answer 1

我希望您的问题是 XMLHTTPRequest 默认情况下不适用于本地文件：Allow Google Chrome to use XMLHttpRequest to load a URL from a local file。跨域控制不适用于非 HTTP 请求。