Wavesurfer.js: Option to show only upper half of the wave forms?

[natashache]

I'm new to this module. Wondering if it's possible to render only the upper half of the wave forms, like the wave forms in the Soundcloud player, instead of rendering symmetrical forms?

[thijstriemstra]

Don't think so, you can use css to do that, e.g. cut off bottom half?

[richardj]

@natashache an easy fix would be to add another element around your wavesurfer container.

Something like:

  <div class="waveform-holder">  
    <div id="waveform"></div>
  </div>

and then make that holder half of the height of the waveform (which is 128px by default as far as i can see) and then add the overflow hidden property.

.waveform-holder {
  height: 64px;
  overflow: hidden;
}

This way it will cut off the bottom half of the waveform leaving you with only the upper half.