BBC Research & Development

Peaks.js

Browser-based audio waveform visualisation

Peaks.js encompasses a suite of software tools designed to allow users to view and interact with audio waveform material in the browser.

Peaks.js uses the HTML5 <canvas> element to display waveform data at different zoom levels, and synchronise the display to playback of an associated <audio> element. The component provides some basic convenience methods for interacting with waveforms and regions of time in the audio, e.g., for distinguishing music from speech, or identifying different music tracks.

For more information on this project, please read this article on the BBC R&D blog.

Workflow

waveform workflow

Source Code

  • audiowaveform

    C++ program that generates waveform data files from MP3 or WAV format audio.
  • audio_waveform-ruby

    A Ruby gem that can read and write waveform data files.
  • waveform-data.js

    JavaScript library that provides access to precomputed waveform data files, or can generate waveform data using the Web Audio API.
  • peaks.js

    JavaScript UI component for interacting with waveforms.

Project Team

Software design and development by Chris Finch, Thomas Parisot, and Chris Needham.

Contact Us

If you have questions, comments or suggestions, please get in touch: irfs@bbc.co.uk.

Example Demo