Skip to content
Waveform Renderer
Docs
Getting Started

Getting Started

Learn how to quickly set up and use Waveform Renderer in your project

Get up and running with Waveform Renderer in just a few minutes. This guide will walk you through installation, basic setup, and your first waveform visualization.

Installation

Section titled “Installation”
Terminal window
npm install waveform-renderer

For additional setup options including TypeScript configuration and CDN usage, see the complete installation guide.

Basic Setup

Section titled “Basic Setup”

1. Prepare Your HTML

Section titled “1. Prepare Your HTML”

Create a canvas element in your HTML where the waveform will be rendered:

<canvas id="waveform" width="800" height="200"></canvas>
<audio id="audio" controls>
  <source src="path/to/your/audio.mp3" type="audio/mpeg" />
</audio>

2. Load and Process Audio

Section titled “2. Load and Process Audio”

First, you need to load your audio file and extract peak data:

import { WaveformRenderer, getPeaksFromAudioBuffer } from "waveform-renderer";


const audioContext = new AudioContext();


async function loadAudio(url: string) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  const peaks = getPeaksFromAudioBuffer(audioBuffer, 1000);
  return { audioBuffer, peaks };
}

3. Create the Waveform

Section titled “3. Create the Waveform”

Now create and configure your waveform renderer:

const canvas = document.getElementById("waveform") as HTMLCanvasElement;
const audio = document.getElementById("audio") as HTMLAudioElement;


const { peaks } = await loadAudio("path/to/your/audio.mp3");


const waveform = new WaveformRenderer(canvas, peaks, {
  color: "#3b82f6",
  backgroundColor: "#f1f5f9",
  progressLine: {
    color: "#ef4444",
    width: 2,
  },
});


waveform.on("seek", progress => {
  audio.currentTime = progress * audio.duration;
});


audio.addEventListener("timeupdate", () => {
  const progress = audio.currentTime / audio.duration;
  waveform.setProgress(progress);
});

Complete Example

Section titled “Complete Example”
<!DOCTYPE html>
<html>
  <head>
    <title>Waveform Renderer Demo</title>
  </head>
  <body>
    <canvas id="waveform" width="800" height="200"></canvas>
    <audio id="audio" controls>
      <source src="your-audio-file.mp3" type="audio/mpeg" />
    </audio>


    <script type="module">
      import { WaveformRenderer, getPeaksFromAudioBuffer } from "waveform-renderer";


      async function init() {
        const canvas = document.getElementById("waveform");
        const audio = document.getElementById("audio");
        const audioContext = new AudioContext();


        const response = await fetch("your-audio-file.mp3");
        const arrayBuffer = await response.arrayBuffer();
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
        const peaks = getPeaksFromAudioBuffer(audioBuffer, 1000);


        const waveform = new WaveformRenderer(canvas, peaks, {
          color: "#3b82f6",
          backgroundColor: "#f1f5f9",
          progressLine: { color: "#ef4444" },
        });


        waveform.on("seek", progress => {
          audio.currentTime = progress * audio.duration;
        });


        audio.addEventListener("timeupdate", () => {
          waveform.setProgress(audio.currentTime / audio.duration);
        });
      }


      init();
    </script>
  </body>
</html>

Common Issues

Section titled “Common Issues”

Audio Context Restrictions

Section titled “Audio Context Restrictions”

Modern browsers require user interaction before creating an AudioContext:

document.addEventListener(
  "click",
  async () => {
    if (audioContext.state === "suspended") {
      await audioContext.resume();
    }
  },
  { once: true },
);

Canvas Sizing

Section titled “Canvas Sizing”

For responsive designs, update canvas size and re-render:

function resizeCanvas() {
  const container = canvas.parentElement;
  canvas.width = container.clientWidth;
  canvas.height = 200;
}


window.addEventListener("resize", resizeCanvas);

Try It Live

Section titled “Try It Live”

Try our Interactive Demo where you can upload your own audio files and customize the waveform in real-time.

Check out the API documentation for complete reference.

Next Steps

Section titled “Next Steps”
Home

Getting Started

Introduction Installation Getting Started Interactive Demo

Framework Integration

React & Preact

API Reference

API Overview

Advanced

Advanced Rendering Custom Renderers Render Hooks

Community

Contributing