Unable to build waveform of audio file using XMLHttpRequest

Here is the scenario:

• I record an audio file using the media cordova plugin and save the recorded file as myRecordingPath in the application’s document directory. The file system has the following path:

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

• Now I load the same recorded file into another view in order to play the recording using the Cordova media plugin (again). He plays great.

• I also wanted to display the waveform of the same file, so I use the Chris Wilson audio buffer library . I tested the same thing in chrome, but in my application, but did not work.

• I am trying to transfer a 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();
           }
  

The sound reproduces perfectly, but the waveform does not load onto the canvas.

Is there something to do with the relative path?

WaveSurfer.js Shore.js, . : .

, .