Can we just load PCM data to generate audio waveforms?

[samcw]

Currently, we seem to be able to generate waveforms only by loading full audio file, if I want to create a audio waveforms list, it must get full list of audio files, which is not friendly enough.If I can just load PCM data to generate the waveforms, and load the real audio file when user want to play it, in this way, the performance of the list will be much better.‎😃

[katspaugh]

You can do this with a combination of pre-decoded audio data and preload="none" on the audio element.

<div id="track1">
  <audio
    src="/examples/audio/audio.wav"
    preload="none"
  />
</div>

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'

// Initialize wavesurfer.js
const ws = WaveSurfer.create({
  container: '#track1',
  media: document.querySelector('#track1 audio'),
  peaks: [[
    0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038,
    0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765,
    0.10682467371225357, ...
  ]]
})