Render Waveform Like Soundcloud.

[interwap]

Hello Katspaugh, great working you got going here with the wavesuferjs plugin. Huge fan!!!

I like way wavesurfer renders the waves tho. Its elegant but is it possible to render the waves like the way soundcloud does. The waveform on soundcloud is bunkers and i really like.

If it's doable, i'd really like to know how using the default wavesurfer.min.js configuration.

Thanks

[entonbiba]

@interwap there will be a parameter option to apply the soundcloud wave in this pr, #1024 it will look like the original soundcloud wave.

If you want to make the wave larger there will be the barHeight parameter in this pr #1020

[interwap]

@entonbiba great, looking forward to it. Just read through the conversation

[thijstriemstra]

can a screenshot of the soundcloud waveform be attached?

[delewis13]

@entonbiba was this ever added / does it still exist? If not, do you have any pointers on what to edit in a custom renderer to achieve this effect? Cheers :)

[entonbiba]

@delewis13 I added the barHeight option a while ago, however the soundcloud wav design thing would look like the following with a simple div overlay that is transparent. I'll link to a sample in a few minutes.

.overlayBar{
    height: 55px; // would be based on half the size of the rendered wavesurfer element
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,0.1);
}
.waveformBar wave{
   z-index:1;
}

<div id="waveform">
    <div class="overlayBar></div>
    <wave></wave>
</div>

[emulienfou]

Full render of Waveform like SoundCloud gist for those who could be interested: https://gist.github.com/emulienfou/ddfea6f416379253f91f67448a96f826