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

Posted 2023-03-14

【中文标题】无法使用 XMLHttpRequest 绘制音频文件的波形

【英文标题】：Unable to plot waveform of audiofile using XMLHttpRequest

【发布时间】：2014-02-20 13:01:18

【问题描述】：

这是场景：

我正在使用 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，但它们都使用相似的概念并产生相同的结果。结果是：没有创建波形。

请指导。

【参考方案1】：

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

【讨论】：

我正在使用 PhoneGap 的移动应用程序中执行此操作。我怎样才能达到同样的效果？

我觉得你需要docs.phonegap.com/en/3.3.0/…。

感谢@cwilso，但默认情况下它已经