Peaks.js — Interact With Audio Waveforms

Peaks.js lets you display and interact with audio waveforms right in the browser. This can be super helpful when you need to:

• Zoom in on a specific section of the audio.
• Add markers to highlight important parts, like speech or music breaks.
• Allow users to make precise clippings.

You can use Peaks.js to visually navigate through audio content, much like you see in professional audio editing software.

Why Would You Use Peaks.js?

1. You need a way to let users interact with audio content — like scrolling through a waveform.
2. You want to allow users to make selections or mark points — for clipping or just for reference.
3. You need zoomable views — so users can get a detailed look at specific parts of the audio.

This is great for building things like podcast editors, audio annotation tools, or music players where interaction matters.

Setting Up Peaks.js in Your Project

Let’s get to the fun part. I’m going to show you how to set this up from scratch. You’ll see how easy it is to get this running.

1. Install Peaks.js

You can install it using npm:

1
npm install --save peaks.js

Or just grab it from a CDN if you don’t want to use a bundler.

2. Basic Setup with Web Audio Here’s a simple way to get Peaks.js working using the Web Audio API. This approach doesn’t require you to pre-generate waveform data, but it’s important to note that it’s CPU intensive and works best with shorter audio files. Here’s how to get started:

1
<audio id="audio" src="sample.mp3" controls></audio>
2
<div id="overview-waveform"></div>
3
<div id="zoomview-waveform"></div>
4

5
const AudioContext = window.AudioContext || window.webkitAudioContext;
6
const audioContext = new AudioContext();
7

8
const options = {
9
  containers: {
10
    overview: document.getElementById('overview-waveform'),
11
    zoomview: document.getElementById('zoomview-waveform')
12
  },
13
  mediaElement: document.getElementById('audio'),
14
  webAudio: {
15
    audioContext: audioContext
16
  }
17
};
18

19
Peaks.init(options, function(err, peaks) {
20
  if (err) {
21
    console.error('Error initializing Peaks.js:', err);
22
  } else {
23
    console.log('Waveform is ready');
24
  }
25
});

What’s happening here?

• We define two div elements where Peaks.js will render the overview and zoomable waveforms.
• The mediaElement points to an <audio> element that holds the audio file.
• We initialize Peaks.js with the webAudio option, which uses the Web Audio API to generate waveforms.

What’s Good About This?

• You don’t need to generate waveform data files ahead of time.
• Users can zoom in on the waveform and interact with it right away.

But, as I mentioned, it can be slow for long audio files since the browser has to download the whole audio file before showing the waveform.

Pre-Generated Waveform Data (For Larger Files)

If you’re working with longer audio files, it’s better to pre-generate the waveform data. Peaks.js supports both JSON and binary formats. Let’s say you have a 1-hour podcast file, and you don’t want to make users wait.

You can use a tool called audiowaveform to generate the waveform data. Generate binary waveform data:

1
audiowaveform -i sample.mp3 -o sample.dat -b 8

This will output a .dat file that Peaks.js can use to render the waveform efficiently. Now you just need to load this into Peaks.js:

1
const options = {
2
  containers: {
3
    overview: document.getElementById('overview-waveform'),
4
    zoomview: document.getElementById('zoomview-waveform')
5
  },
6
  mediaElement: document.getElementById('audio'),
7
  dataUri: {
8
    arraybuffer: 'sample.dat'
9
  }
10
};
11

12
Peaks.init(options, function(err, peaks) {
13
  if (err) {
14
    console.error('Error initializing Peaks.js:', err);
15
  } else {
16
    console.log('Waveform is ready');
17
  }
18
});

Why this is better for longer audio

• Peaks.js doesn’t need to analyze the audio file on the fly.
• The pre-generated .dat file is much smaller, and Peaks.js can load the waveform faster.

Adding Markers and Segments

One of the best features of Peaks.js is the ability to add markers. You can use these markers to create reference points in your audio or even create segments for clipping.

Here’s an example of how you can add a marker at 10 seconds:

1
peaks.segments.add({
2
  id: 'marker1',
3
  startTime: 10,
4
  endTime: 15,
5
  labelText: 'Clip Segment'
6
});
7

8
peaks.points.add({
9
  time: 10,
10
  labelText: 'Start Point'
11
});

Why markers matter

• You can let users visually interact with specific points in the audio.
• Great for building editors where users can clip sections of the audio.

Real-World Example: Podcast Editor

Imagine you’re building a simple podcast editor. Peaks.js allows users to visually interact with their podcast episodes, zoom in to trim dead air, and mark segments for editing.

1
function setupPodcastEditor() {
2
  const options = {
3
    containers: {
4
      overview: document.getElementById('overview-waveform'),
5
      zoomview: document.getElementById('zoomview-waveform')
6
    },
7
    mediaElement: document.getElementById('audio'),
8
    dataUri: {
9
      arraybuffer: 'podcast_waveform.dat'
10
    }
11
  };
12

13
  Peaks.init(options, function(err, peaks) {
14
    if (!err) {
15
      peaks.segments.add({
16
        id: 'intro',
17
        startTime: 0,
18
        endTime: 30,
19
        labelText: 'Podcast Intro'
20
      });
21

22
      console.log('Podcast editor is ready');
23
    }
24
  });
25
}

This setup lets the user zoom in on the intro, mark it, and make precise edits.

Peaks.js is a fantastic tool for anyone needing to interact with audio content in the browser. Whether you’re building a podcast editor or just need to create audio clippings, Peaks.js makes it easy to render, zoom, and mark your audio waveforms.

If you’re working with short audio, the Web Audio API option works well, but for longer files, pre-generating the waveform data is your best bet.