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

Question

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

3

这里是情景：

I am recording an audio file using cordova's media plugin and saving the recorded file as myRecordingPath in the documents directory of the app. The fileSystem has following path:
```
*/var/mobile/Applications/B2EA8890-E5AA-4273-83C4-EB4CA045EA/Documents/
2192014125156.wav*
```
Now I am loading the same recorded file in a different view to play the recording using Cordova's media plugin (again). It plays fine.
I also wanted to display the waveform of the same file so I am using Chris Wilson's audio-buffer-draw library. I have tested out the same in chrome but in my application, its not working.

I am trying to pass the recorded file as follows:

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

请指导。

- madLokesh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cwilso · Accepted Answer

我猜您的问题是XMLHTTPRequest默认不能用于本地文件：允许Google Chrome使用XMLHttpRequest从本地文件加载URL。跨域控制不适用于非HTTP请求。