It is easy. Call music API first to obtain a waveform image. On a web page of your app construct the main block for displaying the waveform. This block with the main background should contain the image obtained from the API. This image visually displays the music waveform. The main block also contains a progress block. Imagine you have a track that lasts four minutes. This four minutes count for 100%. Assume the track was played back say for 2 minutes (50%). That means we have to set up the width of this progress block to be equal to 50%. In addition to the main block, there is a neighbor hover block. The width of the hover block is coupled with the position of the cursor. Important to note that the parent element contains “before” pseudo-element with a gradient. This element is used for visual beauty only.
Progress time is calculated as follows. Length in percent for the given block = (100% * trackTime) / trackDuration
Width in percent for the given block = progress hover block (100% * cursor position along to X axis) / width of the main block
