Play mp3 with Audio Waves in client side and file:///

Question

I am trying to load audio waves using wavesurfer-js

This is working great but challenge for me is to load from file:/// protocol in chrome.

I get following error when loaded from local.

Failed to load file:///Users/ashokshah/audioWaveTest/audio.wav: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

window.onload = function () {
  wavesurfer.load('audio.wav');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>

<div id="waveform"></div>


<button onClick="wavesurfer.play()">Play</button>

Please help me to achieve showing audio waves in chrome from file:/// protocol.

Answer 1

I have found a solution to bypass the cross domain policy by creating the blob of audio files into JavaScript variable and use it instead of audio path.

You can use https://www.npmjs.com/package/stream-to-blob or there are many other options to create blob of audio file.

Whatever the text content you get simply store it into JavaScript variable and use that variable instead of audio path to load on wave surfer. Given examples below:

var myAudio = "data:audio/x-wav;base64,UklGR..."; // enter complete blob data. I have removed it since it was not allowing to paste me completely
waveSurfer.load(myAudio);