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

Question

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

2.3k views Asked by Ashok Shah At 10 September 2024 at 04:48

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.

Original Q&A

There are 2 answers

Ishara Amarasekera On 04 September 2019 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.

**Ashok Shah** · Accepted Answer · 2019-10-04 06:43:36

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

TechQA.

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

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in AUDIO

Related Questions in HTML5-AUDIO

Related Questions in WAVESURFER.JS

Related Questions in SOUNDWAVES

Popular Questions

Popular Tags

Trending Questions