web-audio-analyser - A thin wrapper around the Web Audio API that takes an <audio> element and gives you its waveform/frequency data in return

  •        15

A thin wrapper around the Web Audio API that lets you take some audio and get its waveform/frequency data in return.Optionally, you can pass in your own AudioContext instance too. Note there may only be one instance of this per page, and if not supplied one will be created for you.

http://hughsk.github.io/web-audio-analyser
https://github.com/hughsk/web-audio-analyser

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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 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.

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.


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.

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.

omnitone - Spatial Audio Rendering on the web.

  •    Javascript

Omnitone is a robust implementation of ambisonic decoding and binaural rendering written in Web Audio API. Its rendering process is powered by the fast native features from Web Audio API (GainNode and Convolver), ensuring the optimum performance. The implementation of Omnitone is based on the Google spatial media specification and SADIE's binaural filters. It also powers Resonance Audio SDK for web.

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.

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.

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.

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.

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.

web-audio-school - An intro to the Web Audio API by a series of self-guided workshops.

  •    Javascript

An intro to the Web Audio API by a series of self-guided workshops. We will primarily focus on using the Web Audio API for music, but the concepts here could be applied to game sound and other creative uses.

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.

web-audio-recorder-js - .wav/.ogg/.mp3 recorder with Web Audio API

  •    Javascript

WebAudioRecorder.js is a JavaScript library that records audio input (Web Audio API AudioNode object) and encodes to audio file image (Blob object). It supports three encoding formats. This library uses following encoder libraries as lower layer.

key-and-pad - 🎹 Fun experiment with the Web Audio API 🎶

  •    Javascript

Key&Pad uses the Web Audio API to generate oscillators and effects. I needed some way for these nodes to be updated when the state in the Redux store changed, so I took inspiration from React and wrote a reconciler. It subscribes to the store, and whenever a change is published, it calculates the minimum change needed to update the Web Audio nodes.

web-audio-resources - :musical_keyboard: A list of curated web audio resources

  •    

This is a list of curated resources related to the Web audio API. Browser support for the web audio API can be found here. *: Full disclosure: I am the author of these items.

music-dna

  •    Javascript

A small sample using the Web Audio API and HTML Canvas. It runs the audio through an FFT and renders out the resulting data to a canvas. And it looks very pretty.