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

  •        159

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

https://github.com/katspaugh/wavesurfer.js

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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.

clubber - Application of music theory in audio reactive visualizations

  •    Javascript

This small js library listens to audio sources and extracts the underlying rhythmic information. The linear frequency energies are converted into midi notes which music theory suggests to be a better segregation for music audio. A set of meaningful measurements are produced in a form suitable for direct use in webgl shaders, or any other context. This simple flow provides a powerful framework for the rapid development of awesome audio reactive visualisations.

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.


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.

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.

PlayJoom - Web based Audio Streaming Server

  •    PHP

PlayJoom is a web based audio streaming server. It is written in php and save the data about the audio files like mp3 music in a MySQL database. You can stream your music files, manage covers, and additional informations about the music band, the tracks or the albums. You manage your own playlists with your favorite songs and listen it everywhere in your local network on each device. You can play the audio files direct in the most web browsers on a PC and mobile devices.

waud - Web Audio Library

  •    Haxe

Web Audio Library with HTML5 audio fallback. Waud is a simple and powerful web audio library that allows you to go beyond HTML5's <audio> tag and easily take advantage of Web Audio API. It abstracts Web Audio API making it consistent and reliable across multiple platforms and browsers. It also falls back to HTML5 Audio on non-modern browsers where Web Audio API is not supported.

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.

web-audio-api - Node.js implementation of Web audio API

  •    Javascript

This library implements the Web Audio API specification (also know as WAA) on Node.js. By default, web-audio-api doesn't play back the sound it generates. In fact, an AudioContext has no default output, and you need to give it a writable node stream to which it can write raw PCM audio. After creating an AudioContext, set its output stream like this : audioContext.outStream = writableStream.

tuna - An audio effects library for the Web Audio API.

  •    Javascript

An audio effects library for the Web Audio API. This is a very incomplete list of places where Tuna.js is used.

ion.sound - JavaScript plugin for playing sounds and music in browsers

  •    Javascript

JavaScript plugin for playing sounds on user actions and page events. Today websites are full of events (new mail, new chat-message, content update etc.). Often it is not enough to indicate this events only visually to get user attention. You need sounds! This library, made for playing small sounds, will help you with this task. Also, new version of Ion.Sound is capable to handle browser games audio. It has full control of loading, playing and removing audio files. And audio-sprites support of course.

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

  •    Javascript

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.

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.

koel - A personal music streaming server that works.

  •    PHP

Koel (also stylized as koel, with a lowercase k) is a simple web-based personal audio streaming service written in Vue on the client side and Laravel on the server side. Targeting web developers, Koel embraces some of the more modern web technologies – flexbox, audio, and drag-and-drop API to name a few – to do its job.

essentia - C++ library for audio and music analysis, description and synthesis, including Python bindings

  •    Jupyter

Essentia is an open-source C++ library for audio analysis and audio-based music information retrieval released under the Affero GPL license. It contains an extensive collection of reusable algorithms which implement audio input/output functionality, standard digital signal processing blocks, statistical characterization of data, and a large set of spectral, temporal, tonal and high-level music descriptors. The library is also wrapped in Python and includes a number of predefined executable extractors for the available music descriptors, which facilitates its use for fast prototyping and allows setting up research experiments very rapidly. Furthermore, it includes a Vamp plugin to be used with Sonic Visualiser for visualization purposes. Essentia is designed with a focus on the robustness of the provided music descriptors and is optimized in terms of the computational cost of the algorithms. The provided functionality, specifically the music descriptors included in-the-box and signal processing algorithms, is easily expandable and allows for both research experiments and development of large-scale industrial applications. If you use example extractors (located in src/examples), or your own code employing Essentia algorithms to compute descriptors, you should be aware of possible incompatibilities when using different versions of Essentia.

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.

ampache - A web based audio/video streaming application and file manager allowing you to access your music & videos from anywhere, using almost any internet enabled device

  •    PHP

Ampache is a web based audio/video streaming application and file manager allowing you to access your music & videos from anywhere, using almost any internet enabled device. Ampache's usefulness is heavily dependent on being able to extract correct metadata from embedded tags in your files and/or the file name. Ampache is not a media organiser; it is meant to be a tool which presents an already organised collection in a useful way. It assumes that you know best how to manage your files and are capable of choosing a suitable method for doing so.

meyda - Audio feature extraction for JavaScript.

  •    Javascript

Meyda is a Javascript audio feature extraction library. Meyda supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. We wrote a paper about it, which is available here. Please see the documentation for setup and usage instructions.