{"id":13434455,"url":"https://github.com/AmberJBlue/web-audio-hub","last_synced_at":"2025-03-17T14:31:27.272Z","repository":{"id":190020920,"uuid":"383566193","full_name":"AmberJBlue/web-audio-hub","owner":"AmberJBlue","description":"A collection of resources and projects for the Web Audio API and audio on the web in general. #Awesome-Lists 🕶️","archived":false,"fork":false,"pushed_at":"2021-07-06T21:19:50.000Z","size":10,"stargazers_count":36,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-27T14:45:37.051Z","etag":null,"topics":["audio","audio-library","audio-processing","list","reources","web-audio","web-audio-api","web-development"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AmberJBlue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2021-07-06T18:36:21.000Z","updated_at":"2024-10-19T20:16:51.000Z","dependencies_parsed_at":"2023-08-22T23:28:00.521Z","dependency_job_id":null,"html_url":"https://github.com/AmberJBlue/web-audio-hub","commit_stats":null,"previous_names":["amberjblue/web-audio-hub"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmberJBlue%2Fweb-audio-hub","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmberJBlue%2Fweb-audio-hub/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmberJBlue%2Fweb-audio-hub/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AmberJBlue%2Fweb-audio-hub/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AmberJBlue","download_url":"https://codeload.github.com/AmberJBlue/web-audio-hub/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244050226,"owners_count":20389659,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-library","audio-processing","list","reources","web-audio","web-audio-api","web-development"],"created_at":"2024-07-31T02:01:57.660Z","updated_at":"2025-03-17T14:31:26.836Z","avatar_url":"https://github.com/AmberJBlue.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"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)\n# Web Audio Hub\nA collection of resources and projects for the [Web Audio API](https://www.w3.org/TR/webaudio/) and audio on the web in general. \n\n## Learn\n### Articles\n- [A Phase Aligned Oscilloscope for Web Audio](https://www.mattmontag.com/development/a-phase-aligned-oscilloscope)\n- [A Robust Metronome Using the Web Audio API](https://blog.paul.cx/post/metronome/)\n- [Building a Wavetable Synthesizer From Scratch with Rust, WebAssembly, and WebAudio](https://cprimozic.net/blog/buliding-a-wavetable-synthesizer-with-rust-wasm-and-webaudio/)\n- [Looping Music Seemlessly](https://nolannicholson.com/2019/10/27/looping-music-seamlessly.html)\n- [Make a Piano in only 1kb of JS](https://frankforce.com/1keys-how-i-made-a-keyboard-in-only-1kb-of-javascript/#pianostory)\n- [Metronomes in JS](https://meowni.ca/posts/metronomes/)\n- [Modeling an Analog Delay in the Web Audio API](https://joshuageisler.medium.com/modeling-an-analog-delay-in-the-web-audio-api-4ac1024e925)\n- [Procedural Audio On the Web](https://medium.com/@berraknil/procedural-audio-on-the-web-part-one-166462e7be1e)\n- [Recreating the ring modulator with web audio](http://webaudio.prototyping.bbc.co.uk/ring-modulator/) - Creating a ring modulator using the Web Audio API.\n- [Is WebAssembly Magical Pixie Dust?](https://surma.dev/things/js-to-asc/)\n- [Output Channel](http://outputchannel.com) - A blog featuring Web Audio tutorials.\n- [WebAssembly/Rust Tutorial](https://www.toptal.com/webassembly/webassembly-rust-tutorial-web-audio)\n- [Writing Retrowave in Angular](https://medium.com/its-tinkoff/writing-retrowave-in-angular-4e1ff80798a8)\n\n### Tutorials\n- [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.\n- [Browser Noise: Web Audio Tutorials](https://www.youtube.com/playlist?list=PLLgJJsrdwhPywJe2TmMzYNKHdIZ3PASbr) - Video tutorials by Dan Tramte, hosted on The Audio Programmer YouTube channel.\n- [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.\n- [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.  \n- [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. \n- [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.\n- [The Web Audio API: What Is It?](https://code.tutsplus.com/tutorials/the-web-audio-api-what-is-it--cms-23735)\n- [Web Audio API Video Tutorial Series](https://www.youtube.com/playlist?list=PLMPgoZdlPumc_llMSynz5BqT8dTwr5sZ2) - An 11 part series on the Web Audio API. \n- [Web audio modem](https://martinmelhus.com/web-audio-modem/) -How to encode and decode data using the web audio API\n\n\n### Documentation\n- [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.\n\n### GitHub Repositories\n- [Web Audio Basics](https://github.com/kylestetz/Web-Audio-Basics) - Code samples with CodePen links for each.\n- [Web Audio Perf](https://padenot.github.io/web-audio-perf/) - Performance of various AudioNodes and strategies for efficient resource usage (from WAC2016).\n- [WebAudio School](https://github.com/mmckegg/web-audio-school) - A series of self-guided workshops to learn WebAudio.\n- [WebAudioXML](https://github.com/hanslindetorp/WebAudioXML) - WebAudioXML makes it possible to write Web Audio applications without writing any JavaScript.\n- [Percussion Synthesis Using Web Audio](https://github.com/irritant/WAC-2016-Tutorial) - Synthesize simple percussion sounds (from WAC2016).\n- [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.\n\n### Books \n- [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. \n\n\n## Projects\n### General\n- [AudioMass](https://audiomass.co/) - An online waveform editor.\n- [AudioNodes](https://audionodes.com) - A modular digital audio workstation.\n- [Csound IDE](https://ide.csound.com/) - Csound IDE on the web.\n- [BassoonTracker](https://github.com/steffest/BassoonTracker) - Browser-based old-school Amiga Music Tracker in plain old JavaScript.\n- [Cascade](https://raphaelbastide.com/cascade/) - A live coding environment, running in browser. \"Parasitizing\" CSS to play MIDI signals.\n- [CBM 8032 av](https://roberthenke.com/concerts/cbm8032av.html) - Exploration of graphics and sound, using computers from the early 1980's.\n- [Chrome music lab](https://musiclab.chromeexperiments.com/) - Making learning music more accessible through fun, hands-on experiments.\n- [Cloud Piano](https://cloudpiano.io/) - Join or start a room and are connected to the other players using Web RTC\n- [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.\n- [DSP.audio Worklet Editor](https://dsp.audio/editor/) - An online AudioWorklet editor.\n- [EarSketch](https://earsketch.gatech.edu/landing/#/) - A Free educational programming environment to teach Python and Javascript through music composing and remixing\n- [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.\n- [jamhub](https://github.com/fletcherist/jamhub) - Low-latency musicall collaboration.\n- [Jam with Chrome](http://www.jamwithchrome.com/) - A collaborative live music web application.\n- [Landing Pads](https://www.vitling.xyz/toys/landing-pads/) - An infinite audio-visual composition. \n- [Learning Music](https://learningmusic.ableton.com/) - Learn the basics of music making.\n- [LoopDrop App](https://github.com/mmckegg/loop-drop-app) - MIDI looper, modular synth and sampler app built using Web Audio and Web MIDI APIs.\n- [Molgav](https://github.com/surikov/molgav) - Web Audio Musical Step Sequencer for music exchange.\n- [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.\n- [Musical Chord Progression Arpeggiator](http://codepen.io/jakealbaugh/full/qNrZyw/) - Create arpeggios with different progressions and styles.\n- [Music mouse](https://teropa.info/musicmouse/) - An emulation by Tero Parviainen of Laurie Spiegel's \"Music Mouse - An Intelligent Instrument\".\n- [Nokia Composer](https://zserge.com/nokia-composer/#eyJicG0iOiIxMjAiLCJzb25nIjoiMTZlMiAxNmQyIDgjZiA4I2cgMTYjYzIgMTZiIDhkIDhlIDE2YiAxNmEgOCNjIDhlIDJhIDItIn0=) - The classic Nokia ringtone composer in the browser.\n- [Gibber](http://gibber.mat.ucsb.edu) - An audiovisual live coding environment for the browser ([github](https://github.com/charlieroberts/Gibber))\n- [GridSound](https://gridsound.github.io) - A work-in-progress online digital audio workstation.\n- [Handel](https://handel-pl.github.io/) - a small procedural programming language for writting songs in browser.\n- [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. \n- [Pedalboard](https://github.com/dashersw/pedalboard.js) - Guitar pedal effects simulation.\n- [Plink](http://dinahmoelabs.com/_plink/) - Multiplayer music experience.\n- [The Rick Astley Remix](http://dinahmoelabs.com/rickastley) - Remix Rick Astley's most famous song into different styles.\n- [Shape Your Music](https://shapeyourmusic.dev/) - A musical geoboard that explores a new way of composing and performing music using geometry.\n- [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.\n- [SoundCycle](https://github.com/scriptify/soundcycle) - Web Audio based loop station.\n- [sound.io](https://sound.io/) - Sound design, online.\n- [Supercolider in Browser](https://www.sciss.de/temp/scsynth.wasm/) - Supercolider synthesis engine in the browser via WebAssembly.\n- [Super Oscillator](https://github.com/lukehorvat/super-oscillator) -An interactive, 3D music synthesizer for the Web.\n- [Spectro](https://github.com/calebj0seph/spectro) - A real-time spectrogram generator in the browser. \n- [Symphosizer](https://symphosizer.wearecollins.com/) - A new branding for the San Fransisco Symphony, the text reacts to sound and music.\n- [Theremin](https://femurdesign.com/theremin/) - A Theremin with effects.\n- [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.\n- [Tweet FM](https://tweet-fm.herokuapp.com/) - Combining Twitter feeds and web audio in real time. \n- [Wave-PD1](http://alxgbsn.co.uk/wavepad/) - A themerin-like instrument for the browser.\n- [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.\n- [Wavepot](http://wavepot.com/) - A live DSP editor built with web audio.\n- [Web Audio/MIDI Demo List](http://webaudio.github.io/demo-list/) - A list kept by the W3C audio working group.\n- [Web Audio Metronome](https://github.com/cwilso/metronome) - A Web audio based metronome. \n- [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)\n- [X Sound](https://xsound.app/) - Multi Sound Application that uses XSound.js.\n- [Zvoog](https://zvoog.app/RockDice/main.html) - Create music based on randomly selected chord progressions.\n\n\n### Synths\n- [106.js](http://resistorsings.com/106/) - Emulation of the Roland Juno-106.\n- [Abacus Synth](https://abacusynth.eliasjarzombek.com/) - A synth inspired by an abacus. \n- [Acid Machine 2](http://www.errozero.co.uk/acid-machine/) - In the same vein as the Propellerhead ReBirth RB-338\n- [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/).\n- [D3 synth](http://roadtolarissa.com/synth/) - A D3 visualization with sound loop editing.\n- [Darkwave](https://stewartsmith.io/darkwave/) - A guitar synthesizer.\n- [Key-and-pad](http://keyandpad.com/) - A synthesizer with a XY Pad to control effects.\n- [Modulator](https://lcrespom.github.io/synth/) - An editable graphical node synth.\n- [Mod-synth](http://mod-synth.io) - A visual synthesizer with several components and presets. \n- [Midi synth](http://webaudiodemos.appspot.com/midi-synth/) - Simulated analog synthesizer.\n- [JS Dynamic Audio Synth](http://www.keithwhor.com/music/) - A musical keyboard.\n- [Psyren Audio / Visual Synthesizer](http://www.bolasol.com/psyren/) - Generate psytrance squelches ([github](https://github.com/kbola/psyren))\n- [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.\n- [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/).\n- [Web Audio Synth](https://codepen.io/njmcode/pen/rNebvPe) A web audio synth hosted on codepen.\n- [Web Audio Modules](https://www.webaudiomodules.org/wamsynths/) - Synthesizers created using WebAssembly / AudioWorklets.\n- [Web Synths - Grooves](https://www.websynths.com/grooves)\n- [Web Synths - Microtonal](https://www.websynths.com/microtonal)\n- [Zupiter](https://z.musictools.live/#72) - A modular synth with a pure-data-style programming environment.\n\n### Drum Machines / Sequencers\n- [808303](https://808303.studio/) - A recreation of the classic Roland drum machine and synth.\n- [Bauble FM Drum Machine](https://www.elf-audio.com/synths/bauble/) - From Elf Audio comes a christmas themed drum machine.\n- [Beadz](https://heydon.github.io/beadz-drum-machine/) - Drum machine with adjustable pattern lengths for each instrument.\n- [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).\n- [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.\n- [Grovity](https://grovity.raphaelbastide.com/) - Microtiming sequencer. \n- [HTML5 Drum machine](http://html5drummachine.com/) - Drum machine with several different drumkits.\n- [tony-b](https://www.tony-b.org/) - A drum machine based on the Commodore 64 SID chip.\n\n## Libraries\n- [Audiojs](https://github.com/audiojs/audio) - An object that enables you to easily store, read, and write PCM audio data.\n- [Bap](https://github.com/adamrenklint/bap) - A toolkit for making beats and composing sequences, inspired by the classic MPC60/2000.\n- [Blip](https://github.com/jshanley/blip) - Lightweight web audio wrapper.\n- [gibber.lib.js](http://charlie-roberts.com/gibber/gibber-lib-js) - Library version of [Gibber](http://gibber.mat.ucsb.edu)\n- [Howler.js](https://github.com/goldfire/howler.js) - Web audio library. Falls back to HTML5 Audio.\n- [JZZ](https://github.com/jazz-soft/JZZ) - MIDI library for Node.js and all major browsers.\n- [Mach1Spatial](https://github.com/Mach1Studios/m1-sdk) - Vector based panning spatial audio on the web.\n- [@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.\n- [Meyda](https://github.com/meyda/meyda) - Audio feature extraction library including a variety of widely used audio features.\n- [Musical](https://github.com/PencilCode/musical.js) - A light library with a sequencing synthesizer that supports ABC notation.\n- [Omnitone](https://github.com/GoogleChrome/omnitone) - Ambisonic spatial audio on the web.\n- [Orchestre-JS](https://github.com/ClementRivaille/orchestre-js) - An audio library for managing dynamic music, by playing vertical or horizontal layers.\n- [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/).\n- [Rythm.js](https://okazari.github.io/Rythm.js/) - A javascript library that makes your page dance.\n- [smoothfade](https://github.com/notthetup/smoothfade) - A library for smoothly fading between two AudioNodes.\n- [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.\n- [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.\n- [Theresa's sound world](https://github.com/stuartmemo/theresas-sound-world) - Library for manipulating audio built on top of the web audio API.\n- [Tone.js](https://github.com/Tonejs/Tone.js) - Framework for creating interactive music in the browser.\n- [Tuna](https://github.com/Theodeus/tuna) - Audio effects library.\n- [Wad](https://github.com/rserota/wad) - Library for manipulating audio with web audio.\n- [virtual-audio-graph](https://github.com/benji6/virtual-audio-graph) - Library for declaratively manipulating the Web Audio API.\n- [XSound](https://github.com/Korilakkuma/XSound) - Web Audio API Library for Synths, Visualization, Effects \n\n### Visualization\n- [Audiograph](http://audiograph.xyz/) - A visual exploration of Pilotpriest's 2016 album.\n- [Circular Audio Wave](https://github.com/kelvinau/circular-audio-wave) - A JS library for audio visualization in circular wave.\n- [Peaks.js](https://github.com/bbcrd/peaks.js) - JavaScript UI component for interacting with audio waveforms.\n- [Party mode](https://github.com/preziotte/party-mode) - An audio visualizer powered by d3.js and the web audio api.\n- [Wavesurfer.js](http://wavesurfer-js.org/) - Waveform audio visualization built on top of Web Audio API and HTML5 Canvas.\n- [Waveforms on the web](https://schollz.com/blog/waveforms/) - Converts `\u003caudio\u003e` tags into waveform visualisations.\n- [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.\n\n## Community \nJoin the [Slack](https://web-audio-slackin.herokuapp.com/) channel!\n\n### Conferences\n- [Archive of NIME Publications](http://www.nime.org/archives/) - A great repository of publications from previous NIME (New Interfaces for Musical Expression) conferences. \n- [Web Audio Conference](https://webaudioconf.com/)\n\n  \n\u003c!-- ### Talks\n- [Peter Salomonsen — WebAssembly Music](https://www.youtube.com/watch?v=C8j_ieOm4vE) - From the [Web Assembly Summit](https://webassembly-summit.org/) 2020\n- [AMBIENT HTML5: Music for tiny airports in 256 bytes by Mathieu Henri](https://www.youtube.com/watch?v=Lxho0sjXrKY\u0026list=PLQ9S5oqvpyWm2-HDGnQWWlX30pqYlb_Rz) --\u003e\n\n### Newsletters\n- [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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAmberJBlue%2Fweb-audio-hub","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAmberJBlue%2Fweb-audio-hub","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAmberJBlue%2Fweb-audio-hub/lists"}