BBC Research & Development
Peaks.js

Browser-based audio waveform visualisation

Peaks.js is a JavaScript component that allows users to view and interact with audio waveforms in the browser.

Peaks.js uses the HTML <canvas> element to display the waveform at different zoom levels, and synchronise the display to playback of an associated <audio> or <video> element. The component also allows point and segment markers to be added to the waveform, 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

  • peaks.js

    JavaScript UI component for interacting with waveforms

  • audiowaveform

    C++ program that generates waveform data files from MP3, WAV, FLAC, or Ogg Vorbis format audio

  • waveform-data.js

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

  • audio_waveform-ruby

    A Ruby gem that can read and write waveform data files

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