peaks.js - JavaScript UI component for interacting with audio waveforms

  •        451

A browser based audio waveform visualisation frontend component from BBC R&D.Peaks.js is a modular client-side JavaScript component designed for the display of and interaction with audio waveforms in the browser.

http://waveform.prototyping.bbc.co.uk
https://github.com/bbc/peaks.js

Dependencies:

colors.css : ~3.0.0
eventemitter2 : ~4.1.0
konva : ~1.7.6
waveform-data : ~2.0.1

Tags
Implementation
License
Platform

   




Related Projects

waveform-data

  •    Javascript

waveform-data.js is a JavaScript library for creating zoomable, browsable and segmentable representations of audio waveforms.We use these projects daily in applications such as BBC Radio Archive and browser editing and sharing tools for BBC content editors.

waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview

  •    Javascript

Inspired by Audacity, this project is a multiple track playlist editor written in ES2015 using the Web Audio API. Load tracks and set cues (track cue in, cue out), fades (track fade in, fade out) and track start/end times within the playlist. I've written up some demos on github for the different audio fade types in the project.

videojs-record - video.js plugin for recording audio/video/image files.

  •    Javascript

Video.js plugin for recording audio/video/image files. Use npm (npm install videojs-record) to install the plugin or download the library and dependencies elsewhere. If you want to try the examples, check these instructions below.

wavesurfer.js - Navigable waveform built on Web Audio and Canvas

  •    Javascript

Interactive navigable audio visualization using Web Audio and Canvas. See a tutorial and examples on wavesurfer-js.org.

audiosynth - JS Dynamic Audio Synth

  •    Javascript

Dynamic waveform audio synthesizer, written in Javascript. Generate musical notes dynamically and play them in your browser using the HTML5 Audio Element.


audiowaveform - C++ program to generate waveform data and render waveform images from audio files

  •    C++

audiowaveform is a C++ command-line application that generates waveform data from either MP3, WAV, or FLAC format audio files. Waveform data can be used to produce a visual rendering of the audio, similar in appearance to audio editing applications.Waveform data files are saved in either binary format (.dat) or JSON (.json). Given an input waveform data file, audiowaveform can also render the audio waveform as a PNG image at a given time offset and zoom level.

muze - Composable data visualisation library for web with a data-first approach now powered by WebAssembly

  •    Javascript

Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations. It uses a data-first approach to define the constructs and layers of the chart, automatically generates cross-chart interactivity, and allows you to over-ride any behavior or interaction on the chart.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

wavesurfer.js - Navigable waveform using WebAudio and Canvas

  •    Javascript

Navigable waveform using WebAudio and Canvas

Tone.js - A Web Audio framework for making interactive music in the browser.

  •    Javascript

Tone.js is a Web Audio framework for creating interactive music in the browser. The architecture of Tone.js aims to be familiar to both musicians and audio programmers looking to create web-based audio applications. On the high-level, Tone offers common DAW (digital audio workstation) features like a global transport for scheduling events and prebuilt synths and effects. For signal-processing programmers (coming from languages like Max/MSP), Tone provides a wealth of high performance, low latency building blocks and DSP modules to build your own synthesizers, effects, and complex control signals. Full Installation Instruction.

howler.js - Javascript audio library for the modern web

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

howler.js - Javascript audio library for the modern web.

  •    Javascript

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms. Additional information, live demos and a user showcase are available at howlerjs.com.

FDWaveformView - Reads an audio file and displays the waveform

  •    Swift

FDWaveformView is an easy way to display an audio waveform in your app. It is a nice visualization to show a playing audio file or to select a position in a file. To use it, add an FDWaveformView using Interface Builder or programmatically and then just load your audio as per this example. Note: if your audio file does not have file extension, see this SO question.

bbcticker

  •    

This is an attempt to create a Linux/Unix version of the BBC Online Ticker using GTK. The official Windows version is available from the BBC (http:www.bbc.co.uk). I haven't incorporated all the features of the original yet, but it is still useable

tal - TV Application Layer

  •    Javascript

TAL was developed internally within the BBC as a way of vastly simplifying TV application development whilst increasing the reach of BBC TV applications such as iPlayer. Today all of the BBC's HTML-based TV applications are built using TAL.There are hundreds of different devices in the marketplace and they all use slightly different technologies to achieve the same result. The purpose of TAL is to allow you to write an application once, and be confident that it can be deployed to all HTML-based TV devices.

get_iplayer - A utility for downloading TV and radio programmes from BBC iPlayer

  •    Perl

A utility for downloading TV and radio programmes from BBC iPlayer

bbplot - R package that helps create and export ggplot2 charts in the style used by the BBC News data team

  •    R

This repo contains the functions of the bbplot package, which once installed locally, provides helpful functions for creating and exporting graphics made in ggplot in the style used by the BBC News data team. bbplot is not on CRAN, so you will have to install it directly from Github using devtools.

bbc2mp3

  •    Perl

bbc2mp3 is a simple tool for saving BBC ``Listen Again'' programmes as MP3 files. It can be run either as a command line programme or a simple GUI. It works by saving an audio stream as a wav file (using mplayer) and converting this to mp3 (using lame)

SCWaveformView - A blazing fast customizable waveform view

  •    Objective-C

A blazing fast customizable waveform view. Extract the audio section of an asset (which can be both video or audio) and display a waveform. The SCWaveformView is optimized to do the less file read possible. When scrolling or displaying another part of the waveform, it will only read whatever it needs to render the new section. It will cache the file data to avoid having to read sections that have been already computed. Furthermore, if it does have to read the file, it will read it by bigger segment to minimize the number of read operations next time the timeRange changes.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.