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.

No, I want to run in windows using chrome. In firefox it seems to be working fine. And I don't want to refer Android — Ashok Shah, Sep 12 '17 at 15:52
Try starting chrome [this way](https://stackoverflow.com/questions/19150638/localstorage-event-listener-cannot-fire-in-chrome/19150738#19150738). Otherwise you will have to serve the files from a http via a local server and localhost — , Sep 13 '17 at 08:21

score 1 · Accepted Answer · answered Oct 04 '19 at 06:43

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);

score 0 · Answer 2 · answered Sep 04 '19 at 16:30

As I understand, this is because for security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. This means that a web application using XMLHttpRequest and the Fetch APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

Source: Cross-Origin Resource Sharing (CORS)

One way to resolve this issue is to host your web application in the localhost. You can use this to get started. Then inside index.html file call the wavesurfer.js and create a container where the waveform is to appear.

index.html

<!doctype html>
<!-- You can use this link as well to call wavesurfer.js. This is what's given on their updated documentation-->
<!-- <script src="https://unpkg.com/wavesurfer.js"></script> -->

<head>
  <title>Test Website</title>
</head>

<body>
  <!-- Adding wavesurfer.js script -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
  
  <h1>Wavesurfer Test</h1>
  
  <!-- !-- Create a container where the waveform is to appear-->
  <div id="waveform"></div>
  
  <script src="script/main.js" defer="defer"></script>
  <script src="script/test.js"></script>
</body>

</html>

Then add a script to handle wavesurfer instance. In my case it was test.js

test.js

//Creating  a wavesurfer instance, passing the container selector along with some options like progress color and wave color
var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});

//Loading the audio file you want to play
wavesurfer.load('audio/LOVE_s.mp3');

// You can also load wav files if you want
//wavesurfer.load('audio/songaudio.wav');

//This is the event you play the wavesurver instance i.e when wavesurfer ready event
wavesurfer.on('ready', function() {
  wavesurfer.play();
});

This way I didn't have any trouble in loading a local audio file to wavesurfer. Hope this helps.

Thank you for responding, I am aware of that Cross Domain but my challenge was to play the files through file:/// protocol. I initially converted mp3 files to base 64 and loaded those base64 format in javascript file. In that way I was not getting CORS error. — Ashok Shah, Sep 05 '19 at 06:38
@AshokShah, if possible please share your code as well. It would be helpful to others who want to do it using the file protocol. — Ishara Amarasekera, Sep 06 '19 at 08:25

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

2 Answers2