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, 2019 · 4 min read
Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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

I develop the internetz. Stay up to date with the newsletter https://wholesomedev.substack.com/welcome- Connect with me on Twitter @ https://twitter.com/lasnind

Better Programming

Advice for programmers.

Indrek Lasn

Written by

I develop the internetz. Stay up to date with the newsletter https://wholesomedev.substack.com/welcome- Connect with me on Twitter @ https://twitter.com/lasnind

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store