[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/web-audio.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- 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 [](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 [](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.