Wavesurfer example

Custom renderer

by areski

HTML

<script src="https://unpkg.com/wavesurfer.js"></script>
<div id="wave">
  <div id="loading">Loading.....</div>
</div>

CSS

body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

JavaScript

// Random mp3 file!
var audioUrl = "https://file-examples.com/storage/feb2e515cc6339d7ba1ffcd/2017/11/file_example_MP3_700KB.mp3";

// Instantiate wavesurfer
var wavesurfer = WaveSurfer.create({
  container: "#wave",
  waveColor: '#abafb1',
  progressColor: '#b8ae79',
  barGap: 2,
  barWidth: 2,
  cursorWidth: 3,
  cursorColor: '#b8ae79',
  height: 200,
  responsive: true,
  scrollParent: false
});

wavesurfer.on('ready', function () {
    $("#loading").hide();
});

// Override the renderer
wavesurfer.drawer.drawBars = function (peaks, channelIndex, start, end) {
	return customDrawBars(wavesurfer, peaks, channelIndex, start, end);
};

// Load the mp3
wavesurfer.load(audioUrl);


// Custom drawbars function
// Note: this is based on the source code from the wavesurfer github
// project, but with a few changes to the code that calls
// wavesurfer.drawer.fillRect
function customDrawBars (wavesurfer, peaks, channelIndex, start, end) {

	return wavesurfer.drawer.prepareDraw(peaks, channelIndex, start, end, function (_ref) {
            var absmax = _ref.absmax,
                hasMinVals = _ref.hasMinVals,
                height = _ref.height,
                offsetY = _ref.offsetY,
                halfH = _ref.halfH,
                peaks = _ref.peaks;

            // if drawBars was called within ws.empty we don't pass a start and
            // don't want anything to happen
            if (start === undefined) {
                return;
            } // Skip every other value if there are negatives.


            var peakIndexScale = hasMinVals ? 2 : 1;
            var length = peaks.length / peakIndexScale;
            var bar = wavesurfer.params.barWidth * wavesurfer.params.pixelRatio;
            var gap = wavesurfer.params.barGap === null ? Math.max(wavesurfer.params.pixelRatio, ~~(bar / 2)) : Math.max(wavesurfer.params.pixelRatio, wavesurfer.params.barGap * wavesurfer.params.pixelRatio);
            var step = bar + gap;
            var scale = length /...