Drawing Waveforms Like Rekordbox – Techniques and Insights #4050

GabrielJuliao · 2025-03-04T02:38:36Z

GabrielJuliao
Mar 4, 2025

Hey everyone,

I’m working on a project to render audio waveforms in a style like Rekordbox, and I wanted to open up a discussion on how to achieve this effectively. I've open up a discussion in Stack Overflow on the issue "How to Draw a Solid 3-Band Waveform Like Rekordbox Using Canvas in JavaScript?”. My question may not be directly tied to the WaveSurfer.js library. Instead, I’m looking for general techniques or insights that can replicate Rekordbox’s distinct waveform look.

For context, Rekordbox typically displays a 3-band waveform (low, mid, high) with:
Filled shapes: Each band is a solid, colored area (e.g., blue for low, orange for mid, white for high).

Overlay style: The bands overlap with a clear z-index.

Smooth, club-ready visuals: It’s not just raw peaks but a polished, symmetrical fill between min/max values.

I’ve got a working prototype using HTML5 canvas (code below), where I decode multiband waveform data from JSON, render filled shapes for each band, and allow toggling visibility with checkboxes.

Here’s a simplified version of what I’ve got so far:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Waveform Viewer</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background: #1a1a1a;
        color: #e0e0e0;
      }
      .container {
        max-width: 100%;
      }
      h1 {
        margin: 0 0 20px;
      }
      .controls {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }
      button {
        background: #2c6e31;
        border: none;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background: #3c9341;
      }
      button:disabled {
        background: #444;
        color: #888;
        cursor: not-allowed;
      }
      .waveform-container {
        height: 300px;
        background: #000;
        border: 1px solid #555;
        border-radius: 4px;
      }
      canvas {
        display: block;
      }
      #time-info {
        margin: 10px 0;
        color: #aaa;
      }
      .file-input input[type="file"] {
        background: #333;
        color: #e0e0e0;
        border: 1px solid #555;
        padding: 5px;
        border-radius: 4px;
      }
      #loading {
        display: none;
        margin-left: 10px;
        color: #aaa;
      }
      .scroll-bar {
        width: 100%;
        height: 20px;
        background: #333;
        border: 1px solid #555;
        border-radius: 4px;
      }
      .band-checkboxes {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }
      .band-checkbox {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        background: #333;
        border-radius: 4px;
        cursor: pointer;
      }
      .band-checkbox input {
        margin-right: 5px;
      }
      .color-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Waveform Viewer</h1>
      <div class="file-input">
        <input type="file" id="file-input" accept=".json" />
        <span id="loading">Loading...</span>
      </div>
      <div class="band-checkboxes" id="band-checkboxes"></div>
      <div class="controls">
        <button id="zoom-in">Zoom In</button>
        <button id="zoom-out">Zoom Out</button>
      </div>
      <div class="waveform-container">
        <canvas id="waveform"></canvas>
      </div>
      <div id="time-info">Duration: 0s | View: 0s - 0s</div>
      <input
        type="range"
        id="scroll-bar"
        class="scroll-bar"
        min="0"
        max="100"
        value="0"
        disabled
      />
    </div>

    <script>
      class WaveformRenderer {
        constructor(canvasId) {
          this.canvas = document.getElementById(canvasId);
          this.ctx = this.canvas.getContext("2d");
          this.data = null;
          this.zoom = 1;
          this.offset = 0;
          this.bands = {
            low: { color: "#0055e2", visible: true }, // Blue, bottom
            mid: { color: "#f2aa3c", visible: true }, // Orange, middle
            high: { color: "#ffffff", visible: true }, // White, top
          };
          this.colors = { bg: "#000000", center: "#ccc" };
          this.resize();
          this.createCheckboxes();
          window.addEventListener("resize", () => this.resize());
        }

        resize() {
          this.canvas.width = this.canvas.parentElement.clientWidth;
          this.canvas.height = 300;
          this.render();
        }

        createCheckboxes() {
          const container = document.getElementById("band-checkboxes");
          for (const [name, { color, visible }] of Object.entries(this.bands)) {
            const label = document.createElement("label");
            label.className = "band-checkbox";
            label.innerHTML = `
                        <input type="checkbox" data-band="${name}" ${
              visible ? "checked" : ""
            }>
                        ${name}
                        <span class="color-dot" style="background: ${color}"></span>
                    `;
            label.querySelector("input").addEventListener("change", (e) => {
              this.bands[name].visible = e.target.checked;
              this.render();
            });
            container.appendChild(label);
          }
        }

        async loadData(json) {
          this.data = json;
          for (const band of this.data.data.multiband.bands) {
            band.samples = await this.decodeSamples(
              band.samples,
              band.sample_format,
              this.data.bits_per_sample
            );
          }
          this.render();
          this.updateTime();
          this.enableControls();
          this.updateScroll();
        }

        async decodeSamples(samples, format, bits) {
          const binary = atob(samples);
          const bytes = new Uint8Array(
            [...binary].map((ch) => ch.charCodeAt(0))
          );
          const view = new DataView(bytes.buffer);
          const count = bytes.length / (bits === 8 ? 1 : 2);
          const result = new Int16Array(count);
          for (let i = 0; i < count; i++) {
            result[i] =
              bits === 8 ? view.getInt8(i) * 256 : view.getInt16(i * 2, true);
          }
          return result;
        }

        zoomIn() {
          if (this.zoom < 10) {
            this.zoom *= 1.5;
            this.adjustOffset();
            this.render();
            this.updateTime();
            this.updateScroll();
          }
        }

        zoomOut() {
          if (this.zoom > 0.1) {
            this.zoom /= 1.5;
            this.adjustOffset();
            this.render();
            this.updateTime();
            this.updateScroll();
          }
        }

        adjustOffset() {
          const visible = this.canvas.width / this.zoom;
          const total =
            this.data?.data.multiband.bands[0].samples.length / 2 || 0;
          this.offset = Math.max(0, Math.min(this.offset, total - visible));
        }

        render() {
          const { width, height } = this.canvas;
          this.ctx.fillStyle = this.colors.bg;
          this.ctx.fillRect(0, 0, width, height);

          if (!this.data) return this.renderEmpty();

          const center = height / 2;
          this.ctx.beginPath();
          this.ctx.moveTo(0, center);
          this.ctx.lineTo(width, center);
          this.ctx.strokeStyle = this.colors.center;
          this.ctx.stroke();

          // Render in z-index order: low, mid, high
          ["low", "mid", "high"].forEach((band) => {
            if (this.bands[band].visible) this.renderBand(band, center);
          });
        }

        renderBand(bandName, center) {
          const band = this.data.data.multiband.bands.find(
            (b) => b.name === bandName
          );
          if (!band) return;

          const samples = band.samples;
          const start = Math.floor(this.offset);
          const end = Math.min(
            Math.ceil(this.offset + this.canvas.width / this.zoom),
            samples.length / 2
          );
          const scale = (this.canvas.height / 2) * 0.8;

          this.ctx.beginPath();
          this.ctx.moveTo(0, center);
          for (let i = start; i < end; i++) {
            const x = (i - this.offset) * this.zoom;
            const max = center - (samples[i * 2 + 1] / 32768) * scale;
            this.ctx.lineTo(x, max);
          }
          for (let i = end - 1; i >= start; i--) {
            const x = (i - this.offset) * this.zoom;
            const min = center - (samples[i * 2] / 32768) * scale;
            this.ctx.lineTo(x, min);
          }
          this.ctx.closePath();
          this.ctx.fillStyle = this.bands[bandName].color;
          this.ctx.fill();
        }

        renderEmpty() {
          this.ctx.fillStyle = "#666";
          this.ctx.font = "14px Arial";
          this.ctx.textAlign = "center";
          this.ctx.fillText(
            "Upload a waveform JSON file",
            this.canvas.width / 2,
            this.canvas.height / 2
          );
        }

        updateTime() {
          if (!this.data) return;
          const { samples_per_pixel, sample_rate } = this.data;
          const total =
            ((this.data.data.multiband.bands[0].samples.length / 2) *
              samples_per_pixel) /
            sample_rate;
          const start = (this.offset * samples_per_pixel) / sample_rate;
          const end = Math.min(
            total,
            start +
              ((this.canvas.width / this.zoom) * samples_per_pixel) /
                sample_rate
          );
          document.getElementById(
            "time-info"
          ).textContent = `Duration: ${total.toFixed(
            2
          )}s | View: ${start.toFixed(2)}s - ${end.toFixed(2)}s`;
        }

        enableControls() {
          ["zoom-in", "zoom-out", "scroll-bar"].forEach(
            (id) => (document.getElementById(id).disabled = false)
          );
        }

        updateScroll() {
          const scroll = document.getElementById("scroll-bar");
          const total =
            this.data?.data.multiband.bands[0].samples.length / 2 || 0;
          const visible = this.canvas.width / this.zoom;
          scroll.max = Math.max(0, total - visible);
          scroll.value = this.offset;
          scroll.disabled = total <= visible;
        }
      }

      document.addEventListener("DOMContentLoaded", () => {
        const renderer = new WaveformRenderer("waveform");

        document
          .getElementById("zoom-in")
          .addEventListener("click", () => renderer.zoomIn());
        document
          .getElementById("zoom-out")
          .addEventListener("click", () => renderer.zoomOut());
        document.getElementById("scroll-bar").addEventListener("input", (e) => {
          renderer.offset = +e.target.value;
          renderer.render();
          renderer.updateTime();
        });

        document
          .getElementById("file-input")
          .addEventListener("change", async (e) => {
            const file = e.target.files[0];
            if (!file) return;

            document.getElementById("loading").style.display = "inline";
            try {
              const json = JSON.parse(await file.text());
              if (json.type !== "multiband")
                throw new Error("Only multiband waveforms supported");
              await renderer.loadData(json);
            } catch (err) {
              alert("Error: " + err.message);
            } finally {
              document.getElementById("loading").style.display = "none";
            }
          });
      });
    </script>
  </body>
</html>

Test data: https://github.com/GabrielJuliao/wavypy/blob/main/3band_issue/test_data.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Drawing Waveforms Like Rekordbox – Techniques and Insights #4050

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Drawing Waveforms Like Rekordbox – Techniques and Insights #4050

Uh oh!

GabrielJuliao Mar 4, 2025

Replies: 0 comments

GabrielJuliao
Mar 4, 2025