How to load only waveform and wait to user click 'play' to download the audio?

i am already using a array format to display the waveform first in .load(audio_url,[array of floats]), but in the page has a lot instances to diferent audio files and this slow the page because has to download a lot of audio files.So how can i load the the canvas with the waveform and when i press play to certain wavesurfer instance then download the audio file?

[katspaugh]

In your codepen you had triple quotes around the audio src. I’ve fixed it for you: http://codepen.io/katspaugh/pen/oLmwoZ

[katspaugh]

@drhouse7 I see you are using MediaElement. Maybe try passing an audio element you create yourself in HTML with preload="false", like this:

<audio id="song" style="display: none" preload="false" src="'http://api.soundcloud.com/tracks/45398925..."></audio>

And then pass this audio element instead of the URL:

wavesurfer.load(document.querySelector('#song'), [ 0.0218, 0.0183, 0.0165, 0.0198, 0.2137, ... ]);

Also try experimenting with setting the src of the audio element after the user presses play. It might or might not work, I haven’t checked.