Programmatically trigger waveform rendering

Version: 5.2.0

Hi there,

  • I’m building a visual playlist with AmplitudeJS
  • I’d like to see a waveform for each song in my playlist
  • I have employed <div class="amplitude-wave-form" data-amplitude-song-index="{index}"></div> for that
  • It works great for songs that have been played and thus been loaded by AmplitudeJS

What I’d like to do is is have the waveform rendered before or even without the song actually being played. So basically trigger the again for all or one specific song.

Is there a way to achieve this?

To accomplish this (and to avoid downloading all songs every time the page loads),
I generate my own peaks and svg paths on the server and then pass them into Amplitude.getConfig().waveforms.built. This however does not trigger a re-rendering of the waveforms. Passing the waveforms in the Amplitude.init({ waveforms: { built: [...] } }) method unfortunately does not work (probably because the config object gets overridden).

Thanks a lot,

I’m facing the same issue. I would like to display every song’s waveform after Amplitude initialization. Rigth now, it shows only first waveform, rest keeps empty till song play occurs.
I would like to know how did you generate your own peaks and svg paths, I can’t find any documentation for Amplitude about this.

Thanks for your patience! @danpastori would love to chime in, but unfortunately he is out for dealing with the passing of an immediate family member.

He’s with his family now but it may be some time before he is able to get back. Thanks for your understanding!

1 Like

Thanks for the update. My sincerest condolences. I know how it feels.

1 Like

Hi @cspeer & @Zalo ,

I’ve created an issue here to track the progress of this bug (Generate Waveforms Efficiently · Issue #462 · serversideup/amplitudejs · GitHub). Waveforms is something I want to optimize since there have been a few bugs with the feature.

I’ll fix it and let you both know when it’s complete.