Peaks.js — Interact With Audio Waveforms

Peaks.js is a client-side JavaScript component to display and interact with audio waveforms in the browser

Indrek Lasn
Oct 22 · 4 min read
Peak.js demo

Peaks.js was developed by BBC R&D to allow users to make accurate clippings of audio content in the browser, using a backend API that serves the waveform data.

Peak.js Github page

Peaks.js uses the HTML canvas element to display the waveform at different zoom levels, and it has configuration options to allow you to customize the waveform views. Peaks.js allows users to interact with the waveform views, including zooming and scrolling. Users can also create a point or segment markers that denote content to be clipped or for reference; e.g., distinguishing music from speech or identifying different music tracks.

Peaks.js Workflow

Peak.js Features

  • Zoomable and scrollable waveform view
  • Fixed width waveform view
  • Mouse, touch, scroll wheel, and keyboard interaction
  • Client-side waveform computation, using the Web Audio API, for convenience
  • Server-side waveform computation, for efficiency
  • Mono, stereo, or multi-channel waveform views
  • Create point or segment marker annotations
  • Customizable waveform views

You can read more about the project and see a demo on the BBC R&D’s website.


Installation


Using Peaks.js in Your Own Project

Peaks.js can be included on any web page by following these steps:

Bundler (webpack, parcel, rollup) approach

This works well with systems such as Meteor, webpack, and browserify (with babelify transform).

import Peaks from 'peaks.js';const options = { ... };Peaks.init(options, function(err, peaks) {
// ...
});

Vanilla JavaScript

<script src="node_modules/peaks.js/peaks.js"></script>
<script>
(function(Peaks) {
const options = { ... };
Peaks.init(options, function(err, peaks) {
// ...
});
})(peaks);
</script>

Generate Waveform Data

Peaks.js uses waveform data files produced by audiowaveform. These can be generated in either binary (.dat) or JSON format. The binary format is preferred because of the smaller file size, but this is only compatible with browsers that support Typed Arrays.

You should also use the -b 8 option when generating waveform data files, as Peaks.js does not currently support 16-bit waveform data files. This will also help to minimize file size.

To generate a binary waveform data file:

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

To generate a JSON format waveform data file:

audiowaveform -i sample.mp3 -o sample.json -b 8

Refer to audiowaveform’s main page for full details of the available command-line options.

Audiowaveform GitHub page

Web Audio-Based Waveforms

Peaks.js can use the Web Audio API to generate waveforms, which means you don’t have to pre-generate a dat or json file beforehand. However, note that this requires the browser to download the entire audio file before the waveform can be shown, and this process can be CPU intensive, so it isn’t recommended for long audio files.

To use Web Audio, omit the dataUri option and instead pass a webAudio object that contains an AudioContext instance. Your browser must support the Web Audio API.

const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
const options = {
containers: {
overview: document.getElementById('overview-waveform'),
zoomview: document.getElementById('zoomview-waveform')
},
mediaElement: document.querySelector('audio'),
webAudio: {
audioContext: audioContext
}
};
Peaks.init(options, function(err, peaks) {
// Do something when the waveform is displayed and ready
});

Check out the full API documentation and all options available on Peak.js’s GitHub page.


Contributing

If you’d like to contribute to Peaks.js, please take a look at the contributor guidelines.

Thanks for reading, happy coding!

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software Engineer. I try to be kind and friendly. Let’s change the world together for the better. Follow me on Twitter @ https://twitter/lasnindrek

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade