How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js? How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js? json json

How can I load only waveform and wait to user click 'play' to download the audio on Wavesurfer-js?


Took me a while to hack around the wavesurfer js code to find out how I can make it draw without loading the song already :P

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

//Create new wavesurferwavesurfer = WaveSurfer.create({    container: '#waveform',    backend: 'MediaElement',    mediaType:'audio',    normalize: true,    barWidth: 3});//Set songwavesurfer.song = "http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"//Set peakswavesurfer.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 peakswavesurfer.drawBuffer();//Variable to check if song is loadedwavesurfer.loaded = false;//Load song when play is pressedwavesurfer.on("play", function () {    if(!wavesurfer.loaded) {        wavesurfer.load(wavesurfer.song, wavesurfer.backend.peaks);    }});//Start playing after song is loadedwavesurfer.on("ready", function () {    if(!wavesurfer.loaded) {        wavesurfer.loaded = true;        wavesurfer.play();    }});

Make sure to remove the unnecessary<audio> tag from the html, browsers seem to download all audio files in those tags on load and attributes like preload=false seem to be ignored...