---
visibility: public
---

# Web Audio

**repo:** [notthetup/awesome-webaudio](https://github.com/notthetup/awesome-webaudio)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[javascript|Javascript]]

---

﻿# Awesome WebAudio

[![Awesome](https://awesome.re/badge.svg)](https://github.com/sindresorhus/awesome#readme)

<img src="https://raw.githubusercontent.com/voodootikigod/logo.js/master/webaudio/webaudio-js.png" width="200px" alt="WebAudio">

> A curated list of awesome [WebAudio](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) [packages](#packages) and [demos](#demos).

Inspired by the [awesome](https://github.com/sindresorhus/awesome) list thing.

Please raise a [Pull-Request](https://github.com/notthetup/awesome-webaudio/pulls) to add an awesome WebAudio thing to this list.

## Contents

- [Packages](#packages)
  - [Frameworks](#frameworks)
  - [Libraries](#libraries)
  - [Utilities](#utilities)
  - [MIDI](#midi)
  - [Apps](#apps)
- [Resources](#resources)
  - [Tutorials](#tutorials)
  - [Books](#books)
  - [Newsletters](#newsletters)
  - [Community](#community)
- [Obsolete](#obsolete)

## Packages

### Frameworks

- [Tone.js](https://github.com/Tonejs/Tone.js) - A framework for making interactive [music](/@harrisonqian/awesome/wiki/media/music) in the browser.
- [Bap](https://github.com/adamrenklint/bap) - A toolkit for making beats and composing sequences, inspired by the classic MPC60/2000.
- [Omnitone](https://github.com/GoogleChrome/omnitone) - Ambisonic spatial audio on the web.
- [Mach1Spatial](https://github.com/Mach1Studios/m1-sdk) - Vector based panning spatial audio on the web.
- [Elementary](https://www.elementary.audio/) – Declarative, functional framework for writing audio software on the web or for native [apps](/@harrisonqian/awesome/wiki/platforms/apps)
- [React Native Audio API](https://github.com/software-mansion-labs/react-native-audio-api) - Web Audio API implementation for native [apps](/@harrisonqian/awesome/wiki/platforms/apps) based on [react](/@harrisonqian/awesome/wiki/front-end-development/react)-native.

### Libraries

- [smoothfade](https://github.com/notthetup/smoothfade) - A library for smoothly fading between two AudioNodes.
- [virtual-audio-graph](https://github.com/benji6/virtual-audio-graph) - Library for declaratively manipulating the Web Audio API.
- [XSound.js](https://xsound.app/) - Full stack library.
- [Sound.js](https://github.com/kittykatattack/sound.js) - A micro-library to load, play and generate sound effects and [music](/@harrisonqian/awesome/wiki/media/music) for games and interactive applications.
- [Meyda](https://github.com/meyda/meyda) - Audio feature extraction library including a variety of widely used audio features.
- [Wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - Interactive navigable [audio visualization](/@harrisonqian/awesome/wiki/media/audio-visualization) using Web Audio and [Canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas).
- [Audiojs](https://github.com/audiojs/audio) - An object that enables you to store, read, and write PCM audio data more easily.
- [Tuna](https://github.com/Theodeus/tuna) - An audio effects library.
- [Rythm.js](https://okazari.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/Rythm.js/) - A [javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library that makes your page dance.
- [Howler.js](https://github.com/goldfire/howler.js) - A comprehensive library with a fallback to [HTML5](/@harrisonqian/awesome/wiki/front-end-development/html5) Audio.
- [Circular Audio Wave](https://github.com/kelvinau/circular-audio-wave) - A JS library for [audio visualization](/@harrisonqian/awesome/wiki/media/audio-visualization) in circular wave using Web Audio API and ECharts.
- [Wad](https://github.com/rserota/wad) - Web Audio DAW. Use the Web Audio API for dynamic sound synthesis. It's like [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) for your ears.
- [p5.sound](https://p5js.org/reference/#/libraries/p5.sound) - An extension that adds Web Audio functionality to the [creative coding](/@harrisonqian/awesome/wiki/miscellaneous/creative-coding) library [p5.js](https://p5js.org/).
- [@magenta/music](https://github.com/magenta/magenta-js/tree/master/music) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library to use [machine learning](/@harrisonqian/awesome/wiki/computer-science/machine-learning) models and generate [music](/@harrisonqian/awesome/wiki/media/music) in the browser, by having some neat abstractions over the Webaudio API.
- [soundfont-player](https://www.npmjs.com/package/soundfont-player) - A soundfont loader/player to play MIDI sounds using WebAudio API.
- [html-midi-player](https://github.com/cifkao/html-midi-player) - HTML elements for easy MIDI playback and visualization, without the need to write any custom JS code, but [scriptable](/@harrisonqian/awesome/wiki/miscellaneous/scriptable) and stylable as needed.
- [MusicXML Player](https://github.com/infojunkie/musicxml-player) - A TypeScript component that loads and plays MusicXML files in the browser using Web Audio and Web MIDI.
- [waveform-path](https://github.com/jerosoler/waveform-path) - Library to generate waveforms paths in svg.
- [wave-audio-path-player](https://github.com/jerosoler/wave-audio-path-player) - Simple audio player webcomponent customizable with waveform.
- [dsssp](https://github.com/NumberOneBot/dsssp) - [React](/@harrisonqian/awesome/wiki/front-end-development/react) component library for visualizing and managing audio filters with drag-n-drop and transitions support.
- [tuning-fork](https://github.com/v-rusu/tuning-fork) - A configurable client-side [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library for guitar tuning with real-time pitch detection.

### Utilities

- [Audion](https://github.com/google/audion) - Chrome extension that adds a Web Audio panel to Developer Tools.
- [web-audio-generator](https://github.com/ISNIT0/webaudio-generator) - A UI for generating Web Audio code.
- [Web Audio Studio](https://app.webaudio.studio) - A real-time visualizer for Web Audio API graphs generated from code.

### MIDI

- [midimessage](https://github.com/notthetup/midimessage) - A simple MIDI Message parser.
- [JZZ](https://github.com/jazz-soft/JZZ) - MIDI library for [Node.js](/@harrisonqian/awesome/wiki/platforms/node-js) and all major browsers.
- [JZZ-midi-Gear](https://github.com/jazz-soft/JZZ-midi-Gear) - Retrieve your MIDI device model and manufacturer.
- [WEBMIDI.js](https://webmidijs.org/) - The Web MIDI API made easy.

### Apps

- [BassoonTracker](https://github.com/steffest/BassoonTracker) - MOD/XM Tracker in [Javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript).
- [LoopDrop App](https://github.com/mmckegg/loop-drop-app) - MIDI looper, modular synth and sampler app built using Web Audio and Web MIDI APIs.
- [X Sound](https://xsound.app/) - Multi Sound Application that uses XSound.js.
- [Molgav](https://github.com/surikov/molgav) - Musical Step Sequencer for melodies exchange.
- [mod-synth.io](https://github.com/andrevenancio/mod-synth.io) - Create your own modular synthesizer, or emulate different synths.
- [GridSound](https://gridsound.[github](/@harrisonqian/awesome/wiki/development-environment/github).io) - A work-in-progress DAW (Digital Audio Workstation).
- [Learning Music](https://learningmusic.ableton.com/) - Learn the basics of [music](/@harrisonqian/awesome/wiki/media/music) making.
- [Super Oscillator](https://github.com/lukehorvat/super-oscillator) - An interactive, 3D [music](/@harrisonqian/awesome/wiki/media/music) synthesizer for the Web.
- [AudioNodes](https://audionodes.com) - Modular audio production suite with multi-track audio mixing, audio effects, parameter automation, MIDI editing, synthesis, cloud production, and more.
- [waveform-playlist](https://github.com/naomiaro/waveform-playlist) - Multitrack Web Audio editor and player with [canvas](/@harrisonqian/awesome/wiki/front-end-development/canvas) waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity.
- [SoundCycle](https://github.com/scriptify/soundcycle) - A Web Audio based Loopstation for musicians with effects and different looping modes.
- [DSP.audio Worklet Editor](https://dsp.audio/editor/) - Online Audio Worklet editor for sketching and collaboration, with sampler, MIDI and analyzers. Like a JSFiddle, but for DSP.
- [AudioMass](https://audiomass.co/) - free, open source, web-based Audio and Waveform Editor.
- [Csound IDE](https://ide.csound.com/) - web IDE for [CSound programming language](https://en.wikipedia.org/wiki/Csound).
- [jamhub](https://github.com/fletcherist/jamhub) - low-latency remote [music](/@harrisonqian/awesome/wiki/media/music) collaboration & jam.
- [Web Audio Metronome](https://github.com/cwilso/metronome) - metronome app that uses the Web Audio scheduler and setTimeout scheduler
- [EarSketch](https://earsketch.gatech.edu/landing/#/) - free educational programming environment to teach [Python](/@harrisonqian/awesome/wiki/programming-languages/python) and [Javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript) through [music](/@harrisonqian/awesome/wiki/media/music) composing and remixing
- [webaudio-tinysynth](https://github.com/g200kg/webaudio-tinysynth) - a small synthesizer written in [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) with GM like timbre map.
- [web-audio-beat-detector](https://github.com/meerasndr/sample-golang-app) - a beat detection utility which is using the Web Audio API
- [web-audio-mixer](https://github.com/jamesfiltness/web-audio-mixer) - An audio mixer built using Web Audio.
- [Audio-motion interface](https://github.com/MaxAlyokhin/audio-motion-interface) - A web synthesizer that generates sound using smartphone gestures in the space.
- [Topos](https://topos.raphaelforment.fr) - A Web based live coding environment inspired by the Monome Teletype. Uses Web Audio and MIDI.
- [Online Sequencer](https://onlinesequencer.net) - A simple and easy-to-use sequencer with plenty of functionality, based around the Web Audio API.
- [Binary Synth](https://github.com/MaxAlyokhin/binary-synth) - A web-synthesizer that generates sound from the binary code of any files.
- [dsssp-demo](https://github.com/NumberOneBot/dsssp-demo) - WebAudio [music](/@harrisonqian/awesome/wiki/media/music) player with 7-bands EQ and filter presets.
- [SingMeter](https://www.singmeter.com/) – A collection of browser-based singing tools including a pitch detector and vocal range test.
- [Drumhaus](https://drumha.us/) – a browser-based drum machine with step sequencing, pattern variations, and groove editing.
- [All-in-One Advanced BPM Tool](https://tapbpmhub.com/) – Instantly measure song speed by tapping or using the spacebar. Features MIDI input, optional sound clicks, and real-time BPM visualization. Essential for producers, DJs, rhythm gamers.
- .[synflow](https://synflow.org) [Github](https://github.com/k1ln/synflow) - a browser based modular synth flow engine. With all Web Audio API nodes and more with Worklets (like Vocoder, Reverb, etc. ). With sophisticated Flow automation.
- [online decibel meter](https://realtimesoundmeter.org/) – Free online sound meter to measure environmental noise levels in decibels (dB). Real-time sound level meter for detecting quiet, noisy, or harmful sound levels.
- [PracticeLoop](https://teal-semifreddo-cad4ad.netlify.app/) - Free YouTube looper with progressive speed training, metronome, and chromatic tuner for [music](/@harrisonqian/awesome/wiki/media/music) practice.

## Resources

### Tutorials

- [WebAudio School](https://github.com/mmckegg/web-audio-school) - A series of self-guided workshops to learn WebAudio.
- [Web Audio API Understandable Reference](https://web-audio-api.firebaseapp.com/) - A reference that aims to be easy to understand for those who know some [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) and basic audio principles.
- [The Web Audio API: What Is It?](https://code.tutsplus.com/tutorials/the-web-audio-api-what-is-it--cms-23735) - Intro to WebAudio.
- [Web Audio Basics](https://github.com/kylestetz/Web-Audio-Basics) - A growing set of light code samples with CodePen links for each.
- [Web Audio Perf](https://padenot.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/web-audio-perf/) - Performance of various AudioNodes and strategies for efficient resource usage (from WAC2016).
- [Percussion Synthesis Using Web Audio](https://github.com/irritant/WAC-2016-Tutorial) - This tutorial will introduce the basics of web audio programming by writing code to synthesize simple percussion sounds (from WAC2016).
- [Browser Noise: Web Audio Tutorials](https://www.youtube.com/playlist?list=PLLgJJsrdwhPywJe2TmMzYNKHdIZ3PASbr) - Playlist of video [tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials) by Dan Tramte, hosted on the Audio Programmer YouTube channel.
- [audio-katas](https://github.com/survivejs/audio-katas) - A collection of self-guided [katas](/@harrisonqian/awesome/wiki/miscellaneous/katas) during which you will build a DAW of your own while getting exposed to the key Web Audio APIs.

### Books

- [JavaScript for Sound Artists](https://www.routledge.com/JavaScript-for-Sound-Artists-Learn-to-Code-with-the-Web-Audio-API/Turner-Leonard/p/book/9781138961531) - A bottom up [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) / DOM course using Web Audio for all the examples.
- [Web Audio API](https://webaudioapi.com/book/) - Intended to be a springboard for web developers with little to no digital audio expertise. Geared towards game audio and interactive [apps](/@harrisonqian/awesome/wiki/platforms/apps).

### Newsletters

- [Web Audio Weekly Newsletter](https://www.webaudioweekly.com) - A weekly review of what's happening in Web Audio.

### Community

- [Slack](https://web-audio-slackin.herokuapp.com/) - A [Slack](/@harrisonqian/awesome/wiki/work/slack) for discussing Web Audio.
- [Web Audio Conference](https://webaudioconf.com/) - International conference dedicated to web audio technologies and applications.

## Obsolete

Projects without activity since January 2019 or officially dead.

- [Gibberish](https://github.com/gibber-cc/gibberish) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) DSP library that creates JIT optimized audio callbacks using code generation techniques.
- [lissajous](https://github.com/kylestetz/lissajous) - A tool for programmatic audio performance.
- [SSSynthesiser.js](https://github.com/surikov/SSSynthesiser.js) - A wavetable synthesizer for interactive [music](/@harrisonqian/awesome/wiki/media/music) and sound effects.
- [WAAX](https://github.com/hoch/WAAX/) - Build [Music](/@harrisonqian/awesome/wiki/media/music) [Apps](/@harrisonqian/awesome/wiki/platforms/apps) for browsers.
- [Band.js](https://github.com/meenie/band.js/) An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.
- [reverbGen](https://github.com/adelespinasse/reverbGen) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library for generating artificial reverb impulse responses.
- [TuneJS](https://github.com/abbernie/tune) - A tuning library of microtonal and just intonation scales. Supports over 3,000 historical tunings.
- [Beet.js](https://github.com/zya/beet.js) - A sequencer library for creating euclidean rhythms and polyrhythms.
- [AudioKeys](https://github.com/kylestetz/AudioKeys) - A QWERTY keyboard for web audio projects.
- [web-audio-test-api](https://github.com/mohayonao/web-audio-test-api) - A Web Audio test library for CI.
- [javascript-karplus-strong](https://github.com/mrahtz/javascript-karplus-strong) - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript)/Web Audio implementation of Karplus-Strong guitar synthesis.
- [osc-msg](https://github.com/mohayonao/osc-msg) - OSC message decoder/encoder with fault tolerance.
- [Pizzicato](https://github.com/alemangui/pizzicato) - A library that aims to simplify the creation and manipulation sounds in the browser.
- [Mooog](https://github.com/mattlima/mooog) - Tools that simplify working with AudioNodes, inspired by [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) and mixing tables.
- [envelope-generator](https://github.com/itsjoesullivan/envelope-generator) - Simple ADSR envelope generator for web audio.
- [audio contour](https://github.com/danigb/audio-contour) - A 5 stage audio envelope generator.
- [web-audio-recorder-js](https://github.com/higuma/web-audio-recorder-js) - A library that records audio input (Web Audio API AudioNode object) and encodes to audio file image (Blob object).
- [audiolet](https://github.com/oampo/Audiolet) - A [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library for real-time audio synthesis and composition from within the browser.
- [playnote](https://github.com/createbits/playnote) - Play your favorite instrument in the browser, with complex note intervals and scales.
- [Recorderjs](https://github.com/mattdiamond/Recorderjs) - A plugin for recording/exporting the output of Web Audio API nodes.
- [resampler](https://github.com/notthetup/resampler) - A utility for resampling audio.
- [bpm-detective](https://github.com/tornqvist/bpm-detective) – Detects the BPM of a song or audio sample.
- [web-audio-utils](https://github.com/mohayonao/web-audio-utils) - Commonly needed utility functions for Web Audio API.
- [web-audio-oscillators](https://github.com/lukehorvat/web-audio-oscillators) - A collection of Web Audio custom oscillators.
- [midi-ports](https://github.com/AndrejHronco/midi-ports) - handy library to make it easier to work with attached MIDI devices.
- [Midi Logger](http://outputchannel.com/midi-logger/) - This Midi Logger will print all midi input to your browser for debugging.
- [Code Player](https://github.com/jcppman/code-player) - An experimental app that makes your codes sing for you.
- [Web Audio Modules](https://www.webaudiomodules.org/) - synthesizers and audio effects processors for web browsers (both API and implementations).

## License

[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)

To the extent possible under law, [Chinmay Pendharkar](https://chinmay.audio/) has waived all copyright and related or neighboring rights to this work.
