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

Question

场景如下:

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

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

• 现在，我正在不同的 View 中加载相同的录制文件，以(再次)使用 Cordova 的媒体插件播放录制文件。播放效果很好。

• 我还想显示同一文件的波形，所以我使用 Chris Wilson's 音频缓冲绘制库。我在 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();
           }
  

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

和相对路径有关系吗？

我什至用过WaveSurfer.js和 Shore.js但他们都使用相似的概念并产生相同的结果。结果是:未创建波形。

请指导。

Answer 1

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