[BUG] Played/Unplayed waveform color bug if getDuration() returning NaN

[tdurand]

Hi 👋,

Thanks again for the great work on that lib, I spotted a bug for which I found a workaround, but maybe would be better if we can fix it in the lib directly properly..

Bug description

If you try to customize waveformColor and playedWaveformColor, the waveform does not appear , and you only see the playedWaveform appear as you play

https://user-images.githubusercontent.com/533590/163047091-7997d8d4-b51c-4070-9aed-d6dc10373042.mp4

How to reproduce (I have chrome on windows)

Open demo/index.html (https://github.com/bbc/peaks.js/blob/master/demo/index.html#L281) and add those two params to the zoomview:

zoomview: {
            container: document.getElementById('zoomview-container'),
            playheadClickTolerance: 3,
            waveformColor: '#808080',
            playedWaveformColor: 'red'
}

Workaround

From what I understood (I might be wrong), this bug is happening if we draw the WaveformShape and getDuration() returns NaN

Here is the part of the code I think is responsible: https://github.com/bbc/peaks.js/blob/6bfafd5f813ccbf7b434910b990bd7cefc03f153/src/waveform-overview.js#L407

If we wait metadata of the

<audio preload="metadata">
    <source src="audio.mp3" type="audio/mpeg" />
</audio>

audioElement.onloadedmetadata = (event) => {
  // Init peaks.js when duration is known
};

[chrisn]

Thanks for reporting this and for the analysis and proposed solution, really helpful. I'm working on a fix that follows your suggestion.

[chrisn]

The fix is now released in v2.0.0. You can see details of the changes here and our migration guide in case changes are needed to your code.