How can I download only the signal and wait for the user to click “play” to download the audio to Wavesurfer-js?

Question

On my server, I use Audioowaveform to generate JSON data from my audio files.

In the interface, I use Wavesurfer-JS to draw a waveform based on previous JSON data.

The problem is that on the page, Wavesurfer-JS is ready to load an audio file into the background (and not only when the user presses the play button).

This is my attempt.

This is an important part:

<div id="waveform"> <audio id="song" style="display: none" preload="false" src="http://api.soundcloud.com/tracks/45398925/stream?client_id=fa791b761f68cafa375ab5f7ea51927a"></audio> </div> <script> var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'grey', backend: 'MediaElement', mediaType:'audio', progressColor: 'red', cursorColor: '#fff', normalize: true, barWidth: 3 }); wavesurfer.load(document.querySelector('#song'), ['.$json.']); </script> 

So basically I need to focus on wavesurfer.load and add a new function to this Javascript in order to extract the waveform from the peaks (JSON data) and not download the audio files to load the page, but only when the user clicks the play button.

How can i achieve this?

Answer 1

It took me a while to crack the waveurfer js code to find out how I can do this without already downloading the song: P

Setting the peaks in the backend variable and calling drawBuffer did the trick, combining it with some logic of the play button, and we get the following code:

 //Create new wavesurfer wavesurfer = WaveSurfer.create({ container: '#waveform', backend: 'MediaElement', mediaType:'audio', normalize: true, barWidth: 3 }); //Set song wavesurfer.song = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" //Set peaks wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108]; //Draw peaks wavesurfer.drawBuffer(); //Variable to check if song is loaded wavesurfer.loaded = false; //Load song when play is pressed wavesurfer.on("play", function () { if(!wavesurfer.loaded) { wavesurfer.load(wavesurfer.song, wavesurfer.backend.peaks); } }); //Start playing after song is loaded wavesurfer.on("ready", function () { if(!wavesurfer.loaded) { wavesurfer.loaded = true; wavesurfer.play(); } }); 

Be sure to remove the unnecessary <audio> from the html, the browsers seem to load all the audio files into those tags upon loading, and attributes like preload=false seem to be ignored ...