Question

以下是该方案：

我正在使用cordova的媒体插件录制音频文件，并将录制的文件保存为应用的文档目录中的 myRecordingPath 。 fileSystem有以下路径：
```
*/var/mobile/Applications/B2EA8890-E5AA-4273-83C4-EB4CA045EA/Documents/
2192014125156.wav*
```
现在我在另一个视图中加载相同的录制文件，以便使用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();
         }

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

是否与相对路径有关？

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

请指导。

Answer 1

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

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

1 个答案: