Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/AmberJBlue/web-audio-hub

A collection of resources and projects for the Web Audio API and audio on the web in general. #Awesome-Lists 🕶️
https://github.com/AmberJBlue/web-audio-hub

audio audio-library audio-processing list reources web-audio web-audio-api web-development

Last synced: over 1 year ago
JSON representation

A collection of resources and projects for the Web Audio API and audio on the web in general. #Awesome-Lists 🕶️

Awesome Lists containing this project

README 

          
[![Awesome](https://awesome.re/badge.svg)](https://github.com/sindresorhus/awesome#readme) [![Made With Love](https://img.shields.io/badge/Made%20With-Love-orange.svg)](https://github.com/chetanraj/awesome-github-badges)

# Web Audio Hub

A collection of resources and projects for the [Web Audio API](https://www.w3.org/TR/webaudio/) and audio on the web in general. 



## Learn

### Articles

- [A Phase Aligned Oscilloscope for Web Audio](https://www.mattmontag.com/development/a-phase-aligned-oscilloscope)

- [A Robust Metronome Using the Web Audio API](https://blog.paul.cx/post/metronome/)

- [Building a Wavetable Synthesizer From Scratch with Rust, WebAssembly, and WebAudio](https://cprimozic.net/blog/buliding-a-wavetable-synthesizer-with-rust-wasm-and-webaudio/)

- [Looping Music Seemlessly](https://nolannicholson.com/2019/10/27/looping-music-seamlessly.html)

- [Make a Piano in only 1kb of JS](https://frankforce.com/1keys-how-i-made-a-keyboard-in-only-1kb-of-javascript/#pianostory)

- [Metronomes in JS](https://meowni.ca/posts/metronomes/)

- [Modeling an Analog Delay in the Web Audio API](https://joshuageisler.medium.com/modeling-an-analog-delay-in-the-web-audio-api-4ac1024e925)

- [Procedural Audio On the Web](https://medium.com/@berraknil/procedural-audio-on-the-web-part-one-166462e7be1e)

- [Recreating the ring modulator with web audio](http://webaudio.prototyping.bbc.co.uk/ring-modulator/) - Creating a ring modulator using the Web Audio API.

- [Is WebAssembly Magical Pixie Dust?](https://surma.dev/things/js-to-asc/)

- [Output Channel](http://outputchannel.com) - A blog featuring Web Audio tutorials.

- [WebAssembly/Rust Tutorial](https://www.toptal.com/webassembly/webassembly-rust-tutorial-web-audio)

- [Writing Retrowave in Angular](https://medium.com/its-tinkoff/writing-retrowave-in-angular-4e1ff80798a8)



### Tutorials

- [5 Part Introduction to Web Audio](https://teropa.info/blog/2016/08/19/what-is-the-web-audio-api.html) - Very detailed explaination of audio on the web by Tero Parviainen.

- [Browser Noise: Web Audio Tutorials](https://www.youtube.com/playlist?list=PLLgJJsrdwhPywJe2TmMzYNKHdIZ3PASbr) - Video tutorials by Dan Tramte, hosted on The Audio Programmer YouTube channel.

- [Fun With Web Audio](https://code.tutsplus.com/courses/fun-with-web-audio) - A course on how to build a  musical keyboard with real-time additive audio synthesis with audio visualization.

- [Introduction to Web MIDI](https://code.tutsplus.com/tutorials/introduction-to-web-midi--cms-25220) - A beginner tutorial on how to access and get MIDI data.  

- [Learn to Code Electronic Music Tools with Javascript](https://www.futurelearn.com/courses/electronic-music-tools) - Four week online course teaching Web Audio with projects like synthesizers, sequencers and algorhythmic music. 

- [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 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)

- [Web Audio API Video Tutorial Series](https://www.youtube.com/playlist?list=PLMPgoZdlPumc_llMSynz5BqT8dTwr5sZ2) - An 11 part series on the Web Audio API. 

- [Web audio modem](https://martinmelhus.com/web-audio-modem/) -How to encode and decode data using the web audio API



### Documentation

- [Web Audio API performance and debugging notes](https://padenot.github.io/web-audio-perf/) - Web Audio API from a performance and debugging point of view, outlining some differences between implementations.



### GitHub Repositories

- [Web Audio Basics](https://github.com/kylestetz/Web-Audio-Basics) - Code samples with CodePen links for each.

- [Web Audio Perf](https://padenot.github.io/web-audio-perf/) - Performance of various AudioNodes and strategies for efficient resource usage (from WAC2016).

- [WebAudio School](https://github.com/mmckegg/web-audio-school) - A series of self-guided workshops to learn WebAudio.

- [WebAudioXML](https://github.com/hanslindetorp/WebAudioXML) - WebAudioXML makes it possible to write Web Audio applications without writing any JavaScript.

- [Percussion Synthesis Using Web Audio](https://github.com/irritant/WAC-2016-Tutorial) - Synthesize simple percussion sounds (from WAC2016).

- [purescript-audio-behaviors](https://github.com/mikesol/purescript-audio-behaviors) - DSP in the browser using the behavior pattern. Naturally work with time based events in the Purescript JS dialect.



### Books 

- [Web Audio API: Advanced Sound for Games and Interactive Apps](https://bookshop.org/books/web-audio-api-advanced-sound-for-games-and-interactive-apps/9781449332686) - Great starting point and overview of the basics with examples. 



## Projects

### General

- [AudioMass](https://audiomass.co/) - An online waveform editor.

- [AudioNodes](https://audionodes.com) - A modular digital audio workstation.

- [Csound IDE](https://ide.csound.com/) - Csound IDE on the web.

- [BassoonTracker](https://github.com/steffest/BassoonTracker) - Browser-based old-school Amiga Music Tracker in plain old JavaScript.

- [Cascade](https://raphaelbastide.com/cascade/) - A live coding environment, running in browser. "Parasitizing" CSS to play MIDI signals.

- [CBM 8032 av](https://roberthenke.com/concerts/cbm8032av.html) - Exploration of graphics and sound, using computers from the early 1980's.

- [Chrome music lab](https://musiclab.chromeexperiments.com/) - Making learning music more accessible through fun, hands-on experiments.

- [Cloud Piano](https://cloudpiano.io/) - Join or start a room and are connected to the other players using Web RTC

- [DearDiary.ai](https://magenta.tensorflow.org/dear-diary) - Type some words—thoughts, feelings, poems, goals, stories, a to-do list—and you’ve created an original song. Music is generated between 'sad' and 'happy' melodies based on the sentiment of your writing.

- [DSP.audio Worklet Editor](https://dsp.audio/editor/) - An online AudioWorklet editor.

- [EarSketch](https://earsketch.gatech.edu/landing/#/) - A Free educational programming environment to teach Python and Javascript through music composing and remixing

- [FM Synthesis with Rust, Web Audio, and WebAssembly](https://cprimozic.net/blog/fm-synth-rust-wasm-simd/) - FM synthesis in browser using Rust compiled to WebAssembly.

- [jamhub](https://github.com/fletcherist/jamhub) - Low-latency musicall collaboration.

- [Jam with Chrome](http://www.jamwithchrome.com/) - A collaborative live music web application.

- [Landing Pads](https://www.vitling.xyz/toys/landing-pads/) - An infinite audio-visual composition. 

- [Learning Music](https://learningmusic.ableton.com/) - Learn the basics of music making.

- [LoopDrop App](https://github.com/mmckegg/loop-drop-app) - MIDI looper, modular synth and sampler app built using Web Audio and Web MIDI APIs.

- [Molgav](https://github.com/surikov/molgav) - Web Audio Musical Step Sequencer for music exchange.

- [mod-synth.io](https://github.com/andrevenancio/mod-synth.io) - reate your own modular synthesizer, or emulate different synths by simply drag and drop components.

- [Musical Chord Progression Arpeggiator](http://codepen.io/jakealbaugh/full/qNrZyw/) - Create arpeggios with different progressions and styles.

- [Music mouse](https://teropa.info/musicmouse/) - An emulation by Tero Parviainen of Laurie Spiegel's "Music Mouse - An Intelligent Instrument".

- [Nokia Composer](https://zserge.com/nokia-composer/#eyJicG0iOiIxMjAiLCJzb25nIjoiMTZlMiAxNmQyIDgjZiA4I2cgMTYjYzIgMTZiIDhkIDhlIDE2YiAxNmEgOCNjIDhlIDJhIDItIn0=) - The classic Nokia ringtone composer in the browser.

- [Gibber](http://gibber.mat.ucsb.edu) - An audiovisual live coding environment for the browser ([github](https://github.com/charlieroberts/Gibber))

- [GridSound](https://gridsound.github.io) - A work-in-progress online digital audio workstation.

- [Handel](https://handel-pl.github.io/) - a small procedural programming language for writting songs in browser.

- [Keyfinder](https://keyfinder.live/) - Using the libkeyfinder library compiled to WebAssembly to detect the musical key of live audio input or an uploaded audio file in browser. 

- [Pedalboard](https://github.com/dashersw/pedalboard.js) - Guitar pedal effects simulation.

- [Plink](http://dinahmoelabs.com/_plink/) - Multiplayer music experience.

- [The Rick Astley Remix](http://dinahmoelabs.com/rickastley) - Remix Rick Astley's most famous song into different styles.

- [Shape Your Music](https://shapeyourmusic.dev/) - A musical geoboard that explores a new way of composing and performing music using geometry.

- [Some of the Best Music Pens on CodePen](https://blog.codepen.io/2017/03/17/best-music-pens-codepen/) - A list that includes the best audio-related projects in CodePen.

- [SoundCycle](https://github.com/scriptify/soundcycle) - Web Audio based loop station.

- [sound.io](https://sound.io/) - Sound design, online.

- [Supercolider in Browser](https://www.sciss.de/temp/scsynth.wasm/) - Supercolider synthesis engine in the browser via WebAssembly.

- [Super Oscillator](https://github.com/lukehorvat/super-oscillator) -An interactive, 3D music synthesizer for the Web.

- [Spectro](https://github.com/calebj0seph/spectro) - A real-time spectrogram generator in the browser. 

- [Symphosizer](https://symphosizer.wearecollins.com/) - A new branding for the San Fransisco Symphony, the text reacts to sound and music.

- [Theremin](https://femurdesign.com/theremin/) - A Theremin with effects.

- [Tower of Hanoi Sonification](http://philliphermans.com/hanoi/) - A sonified version of the Tower of Hanoi puzzle. Each disc is connected to its own Sine oscillator.

- [Tweet FM](https://tweet-fm.herokuapp.com/) - Combining Twitter feeds and web audio in real time. 

- [Wave-PD1](http://alxgbsn.co.uk/wavepad/) - A themerin-like instrument for the browser.

- [waveform-playlist](https://github.com/naomiaro/waveform-playlist) - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations.

- [Wavepot](http://wavepot.com/) - A live DSP editor built with web audio.

- [Web Audio/MIDI Demo List](http://webaudio.github.io/demo-list/) - A list kept by the W3C audio working group.

- [Web Audio Metronome](https://github.com/cwilso/metronome) - A Web audio based metronome. 

- [Winamp2-js](https://jordaneldredge.com/projects/winamp2-js/) - A reimplementation of Winamp 2.9 using the Web Audio API. [GitHub](https://github.com/captbaritone/winamp2-js)

- [X Sound](https://xsound.app/) - Multi Sound Application that uses XSound.js.

- [Zvoog](https://zvoog.app/RockDice/main.html) - Create music based on randomly selected chord progressions.



### Synths

- [106.js](http://resistorsings.com/106/) - Emulation of the Roland Juno-106.

- [Abacus Synth](https://abacusynth.eliasjarzombek.com/) - A synth inspired by an abacus. 

- [Acid Machine 2](http://www.errozero.co.uk/acid-machine/) - In the same vein as the Propellerhead ReBirth RB-338

- [Carp](https://schollz.github.io/carp/#eyJpIjoiQyh1KSBBbShkKSBEZGltIEYiLCJiIjo2MCwibyI6NCwiYSI6MSwiYyI6NH0=) - A chord arpeggio sequencer based on the [Korg NTS-1](https://www.korg.com/uk/products/dj/nts_1/).

- [D3 synth](http://roadtolarissa.com/synth/) - A D3 visualization with sound loop editing.

- [Darkwave](https://stewartsmith.io/darkwave/) - A guitar synthesizer.

- [Key-and-pad](http://keyandpad.com/) - A synthesizer with a XY Pad to control effects.

- [Modulator](https://lcrespom.github.io/synth/) - An editable graphical node synth.

- [Mod-synth](http://mod-synth.io) - A visual synthesizer with several components and presets. 

- [Midi synth](http://webaudiodemos.appspot.com/midi-synth/) - Simulated analog synthesizer.

- [JS Dynamic Audio Synth](http://www.keithwhor.com/music/) - A musical keyboard.

- [Psyren Audio / Visual Synthesizer](http://www.bolasol.com/psyren/) - Generate psytrance squelches ([github](https://github.com/kbola/psyren))

- [Reactive Synth](https://patrickstephansen.github.io/reactive-synth/?#{%22stateVersion%22:2,%22modules%22:[{%22id%22:%22Output%20to%20Speakers%22,%22moduleType%22:%22output%22}],%22inputs%22:[{%22moduleId%22:%22Output%20to%20Speakers%22,%22name%22:%22audio%20to%20play%22,%22sources%22:[]}],%22outputs%22:[],%22choiceParameters%22:[],%22parameters%22:[]}) - A deep modular synthesis environment in the browser.

- [WASM Synth](https://timdaub.github.io/wasm-synth/) - A synthesizer built with WebAssembly and AudioWorklets. Read the blog about it [here](https://timdaub.github.io/2020/02/19/wasm-synth/).

- [Web Audio Synth](https://codepen.io/njmcode/pen/rNebvPe) A web audio synth hosted on codepen.

- [Web Audio Modules](https://www.webaudiomodules.org/wamsynths/) - Synthesizers created using WebAssembly / AudioWorklets.

- [Web Synths - Grooves](https://www.websynths.com/grooves)

- [Web Synths - Microtonal](https://www.websynths.com/microtonal)

- [Zupiter](https://z.musictools.live/#72) - A modular synth with a pure-data-style programming environment.



### Drum Machines / Sequencers

- [808303](https://808303.studio/) - A recreation of the classic Roland drum machine and synth.

- [Bauble FM Drum Machine](https://www.elf-audio.com/synths/bauble/) - From Elf Audio comes a christmas themed drum machine.

- [Beadz](https://heydon.github.io/beadz-drum-machine/) - Drum machine with adjustable pattern lengths for each instrument.

- [Beat Map online demo](https://www.reasonstudios.com/beatmap-player) - A web based demo of the Beat Map, agenerative rhythm plugin for [Reason](https://www.reasonstudios.com/en/reason/reason-as-a-studio).

- [Endless Acid Banger](https://www.vitling.xyz/toys/acid-banger/) - Play Acid beats forever these beats which are generated in your browser by a randomised algorithm.

- [Grovity](https://grovity.raphaelbastide.com/) - Microtiming sequencer. 

- [HTML5 Drum machine](http://html5drummachine.com/) - Drum machine with several different drumkits.

- [tony-b](https://www.tony-b.org/) - A drum machine based on the Commodore 64 SID chip.



## Libraries

- [Audiojs](https://github.com/audiojs/audio) - An object that enables you to easily store, read, and write PCM audio data.

- [Bap](https://github.com/adamrenklint/bap) - A toolkit for making beats and composing sequences, inspired by the classic MPC60/2000.

- [Blip](https://github.com/jshanley/blip) - Lightweight web audio wrapper.

- [gibber.lib.js](http://charlie-roberts.com/gibber/gibber-lib-js) - Library version of [Gibber](http://gibber.mat.ucsb.edu)

- [Howler.js](https://github.com/goldfire/howler.js) - Web audio library. Falls back to HTML5 Audio.

- [JZZ](https://github.com/jazz-soft/JZZ) - MIDI library for Node.js and all major browsers.

- [Mach1Spatial](https://github.com/Mach1Studios/m1-sdk) - Vector based panning spatial audio on the web.

- [@magenta/music](https://github.com/magenta/magenta-js/tree/master/music) - A JavaScript library to use machine learning models and generate music in the browser, by having some neat abstractions over the Webaudio API.

- [Meyda](https://github.com/meyda/meyda) - Audio feature extraction library including a variety of widely used audio features.

- [Musical](https://github.com/PencilCode/musical.js) - A light library with a sequencing synthesizer that supports ABC notation.

- [Omnitone](https://github.com/GoogleChrome/omnitone) - Ambisonic spatial audio on the web.

- [Orchestre-JS](https://github.com/ClementRivaille/orchestre-js) - An audio library for managing dynamic music, by playing vertical or horizontal layers.

- [p5.sound](https://p5js.org/reference/#/libraries/p5.sound) - An extension that adds Web Audio functionality to the creative coding library [p5.js](https://p5js.org/).

- [Rythm.js](https://okazari.github.io/Rythm.js/) - A javascript library that makes your page dance.

- [smoothfade](https://github.com/notthetup/smoothfade) - A library for smoothly fading between two AudioNodes.

- [Soundio](https://github.com/soundio/soundio) - Soundio is a Graph Object Model for Web Audio processing graphs. It also provides a JSONify-able structure for exporting and importing them.

- [Sound.js](https://github.com/kittykatattack/sound.js) - A micro-library to load, play and generate sound effects and music for games and interactive applications.

- [Theresa's sound world](https://github.com/stuartmemo/theresas-sound-world) - Library for manipulating audio built on top of the web audio API.

- [Tone.js](https://github.com/Tonejs/Tone.js) - Framework for creating interactive music in the browser.

- [Tuna](https://github.com/Theodeus/tuna) - Audio effects library.

- [Wad](https://github.com/rserota/wad) - Library for manipulating audio with web audio.

- [virtual-audio-graph](https://github.com/benji6/virtual-audio-graph) - Library for declaratively manipulating the Web Audio API.

- [XSound](https://github.com/Korilakkuma/XSound) - Web Audio API Library for Synths, Visualization, Effects 



### Visualization

- [Audiograph](http://audiograph.xyz/) - A visual exploration of Pilotpriest's 2016 album.

- [Circular Audio Wave](https://github.com/kelvinau/circular-audio-wave) - A JS library for audio visualization in circular wave.

- [Peaks.js](https://github.com/bbcrd/peaks.js) - JavaScript UI component for interacting with audio waveforms.

- [Party mode](https://github.com/preziotte/party-mode) - An audio visualizer powered by d3.js and the web audio api.

- [Wavesurfer.js](http://wavesurfer-js.org/) - Waveform audio visualization built on top of Web Audio API and HTML5 Canvas.

- [Waveforms on the web](https://schollz.com/blog/waveforms/) - Converts `` tags into waveform visualisations.

- [Web Audio Inspector](https://github.com/google/audion) - A debugging tool that visualizes the Web Audio API graph of a web page in real time.



## Community 

Join the [Slack](https://web-audio-slackin.herokuapp.com/) channel!



### Conferences

- [Archive of NIME Publications](http://www.nime.org/archives/) - A great repository of publications from previous NIME (New Interfaces for Musical Expression) conferences. 

- [Web Audio Conference](https://webaudioconf.com/)



  



### Newsletters

- [Web Audio Weekly by Chris Lowis](http://tinyletter.com/webaudioweekly) - A weekly newsletter with hints, tips, links and news related to the Web Audio world.