{"id":13516890,"url":"https://github.com/alemangui/web-audio-resources","last_synced_at":"2025-04-06T21:14:48.430Z","repository":{"id":36870661,"uuid":"41177633","full_name":"alemangui/web-audio-resources","owner":"alemangui","description":":musical_keyboard: A list of curated web audio resources ","archived":false,"fork":false,"pushed_at":"2018-10-28T20:43:43.000Z","size":136,"stargazers_count":510,"open_issues_count":0,"forks_count":50,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-03-30T20:11:10.375Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/alemangui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-21T21:09:02.000Z","updated_at":"2025-03-01T21:54:49.000Z","dependencies_parsed_at":"2022-09-08T00:21:26.957Z","dependency_job_id":null,"html_url":"https://github.com/alemangui/web-audio-resources","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alemangui%2Fweb-audio-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alemangui%2Fweb-audio-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alemangui%2Fweb-audio-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alemangui%2Fweb-audio-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alemangui","download_url":"https://codeload.github.com/alemangui/web-audio-resources/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550689,"owners_count":20956987,"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":[],"created_at":"2024-08-01T05:01:26.883Z","updated_at":"2025-04-06T21:14:48.410Z","avatar_url":"https://github.com/alemangui.png","language":null,"funding_links":[],"categories":["Technical","Others"],"sub_categories":["ramanihiteshc@gmail.com"],"readme":"\u003cimg align=\"center\" src=\"https://alemangui.github.io/web-audio-resources/header.jpg\" alt=\"Web audio resources\"\u003e\n\nThis is a list of curated resources related to the [Web audio API](http://webaudio.github.io/web-audio-api/). Browser support for the web audio API can be found [here](http://caniuse.com/#feat=audio-api).\n\n\n## Learning and tutorials\n- [MDN Web api documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) - Mozilla documentation for developing with web audio API.\n- [Web audio API](http://chimera.labs.oreilly.com/books/1234000001552/index.html) - An e-book by Boris Smud.\n- [Noisehack](http://noisehack.com/) - A Blog about audio programming with plenty of articles about web audio api.\n- [Web audio gotchas](https://github.com/Jam3/web-audio-player#webaudio-gotchas) - A small list of tricky web audio gotchas that are much needed to keep sanity.\n- [Building a virtual synth pad](http://www.sitepoint.com/html5-web-audio-api-tutorial-building-virtual-synth-pad/) - Tutorial to build a virtual synth pad that will play audio samples and provide a reverb feature.\n- [Web audio playground](http://webaudioplayground.appspot.com/) - A graphic builder of an audio context graph. Helps visualize the way connections are made between web audio nodes.\n- [Web audio for games](http://www.html5rocks.com/en/tutorials/webaudio/games/) Web audio techniques applied to game development.\n- [Peaks.js explained](http://www.bbc.co.uk/rd/blog/2013/10/audio-waveforms) - Article on the development of Peaks.js, an audio waveform rendering tool for the browser.\n- [Guitar tuner tutorial](https://aerotwist.com/blog/guitar-tuner/) - Create a guitar tuner with web audio and Polymer\n- [Synthesizing tones with Fourier transforms](http://www.sitepoint.com/using-fourier-transforms-web-audio-api/) - Sound generation with oscillators and Fourier transforms.\n- [Web MIDI API and Web Audio tutorial](http://www.toptal.com/web/creating-browser-based-audio-applications-controlled-by-midi-hardware) - Basic tutorial to create a simple synthesizer controlled by MIDI hardware.\n- [The Web Audio API from Node to the browser](http://www.willvillanueva.com/the-web-audio-api-from-nodeexpress-to-your-browser/) - Tutorial on serving audio files from Node/Express and consuming them in the browser.\n- [Beat detection using Javascript](http://tech.beatport.com/2014/web-audio/beat-detection-using-web-audio/) - How to detect beats and tempo using the web audio API.\n- [Javascript Air episode on Web Audio](https://javascriptair.com/episodes/2016-07-27/) - An overview at audio programming with JavaScript and an introduction to some tools and frameworks.\n- [Slack's web audio channel](https://web-audio-slackin.herokuapp.com/) - A friendly slack channel of people interested in web audio.\n- [JavaScript Systems Music](http://teropa.info/blog/2016/07/28/javascript-systems-music.html) - An article by Tero Parviainen on recreating generative music pieces by Steve Reich and Brian Eno.\n- [Recreating Legendary 8-bit games music](http://codepen.io/gregh/post/recreating-legendary-8-bit-games-music-with-web-audio-api) - An article on how to use web audio to generate 8-bit music (a.k.a chiptune).\n\n## Libraries\n- [Howler.js](https://github.com/goldfire/howler.js) - Web audio library. Falls back to HTML5 Audio.\n- [Tone.js](https://github.com/Tonejs/Tone.js) - Framework for creating interactive music in the browser.\n- [Wad](https://github.com/rserota/wad) - Library for manipulating audio with web audio.\n- [Tuna](https://github.com/Theodeus/tuna) - Audio effects library.\n- [Blip](https://github.com/jshanley/blip) - Lightweight web audio wrapper.\n- [Pizzicato](https://github.com/alemangui/pizzicato)\u003csup\u003e[*](#disclosure)\u003c/sup\u003e - A library that aims to simplify the way you create and manipulate sounds with the Web Audio API.\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- [Theresa's sound world](https://github.com/stuartmemo/theresas-sound-world) - Library for manipulating audio built on top of the web audio API.\n- [Musical](https://github.com/PencilCode/musical.js) - A light library with a sequencing synthesizer that supports ABC notation.\n- [virtual-audio-graph](https://github.com/benji6/virtual-audio-graph) - Library for declaratively manipulating the Web Audio API.\n- [gibber.lib.js](http://charlie-roberts.com/gibber/gibber-lib-js) - Library version of [Gibber](http://gibber.mat.ucsb.edu)\n- [XSound](https://github.com/Korilakkuma/XSound) - Web Audio API Library for Synths, Visualization, Effects ... etc\n\n## Visualization\n- [Wavesurfer.js](http://wavesurfer-js.org/) - Waveform audio visualization built on top of Web Audio API and HTML5 Canvas.\n- [Peaks.js](https://github.com/bbcrd/peaks.js) - JavaScript UI component created by the BBC for interacting with waveforms.\n- [Party mode](https://github.com/preziotte/party-mode) - An audio visualizer powered by d3.js and the web audio api.\n- [Audiograph](http://audiograph.xyz/) - A visualization of Pilotpriest'S 2016 album and one of the winners of the Dolby Web Challenge.\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## Synths\n- [Websynths](http://websynths.com/) - Web synthesizer by Mitch Wells.\n- [JS Dynamic Audio Synth](http://www.keithwhor.com/music/) - A musical keyboard by Keith William Horwood.\n- [106.js](http://resistorsings.com/106/) - Emulation of the classic Roland Juno-106 analog synthesizer.\n- [Midi synth](http://webaudiodemos.appspot.com/midi-synth/) - Analog synthesizer simulation loosely based on the architecture of a Moog Prodigy synthesizer.\n- [X Sound](https://korilakkuma.github.io/X-Sound/) - Web Synthesizer by [XSound](https://github.com/Korilakkuma/XSound).\n- [Acid Machine 2](http://www.errozero.co.uk/acid-machine/) - similar to Propellerhead ReBirth RB-338 (although doesn't claim to be a port)\n\n## Fun and interesting projects\n- [Chrome music lab](https://musiclab.chromeexperiments.com/) - Web Audio experiments aimed at making learning music more accessible to everyone.\n- [Jam with Chrome](http://www.jamwithchrome.com/) - A collaborative live music web application.\n- [Plink](http://dinahmoelabs.com/_plink/) - Multiplayer music experience.\n- [Modulator](https://lcrespom.github.io/synth/) - An editable graphical node synth.\n- [sound.io](https://sound.io/) - A live-performance Web Audio tool which allows on-the-fly modification of audio.\n- [Drums](https://mikedotalmond.github.io/drums/) - A 16-step, 8-track, drum sequencer with per-step sample controls.\n- [Recreating the ring modulator with web audio](http://webaudio.prototyping.bbc.co.uk/ring-modulator/) - An article on coding the device used to create the voices of the Daleks and the Cybermen in Dr. Who.\n- [Drum machine](http://html5drummachine.com/) - Drum machine with several different drumkits.\n- [Pedalboard](https://github.com/dashersw/pedalboard.js) - Guitar pedal effects simulation.\n- [Wave-PD1](http://alxgbsn.co.uk/wavepad/) - A themerin-like instrument for the browser.\n- [Wavepot](http://wavepot.com/) - A live digital signal processor (DSP) editor built with web audio.\n- [Tonalhub](https://alemangui.github.io/Tonalhub/)\u003csup\u003e[*](#disclosure)\u003c/sup\u003e - Hear a web audio representation of the last year's commit activity of a given GitHub user and repository.\n- [Tweet FM](https://tweet-fm.herokuapp.com/) - An interesting multimedia experiment combining Tweeter feeds and web audio in real time. \n- [Mod-synth](http://mod-synth.io) - A visual synthesizer with several components and presets. It can also be used with a MIDI controller.\n- [The Rick Astley Remix](http://dinahmoelabs.com/rickastley) - Remix Rick Astley's most famous song into different styles.\n- [Theremin](https://femurdesign.com/theremin/) - Another Theremin with delays, feedbacks and scuzz.\n- [Key-and-pad](http://keyandpad.com/) - A Web Audio synthesizer with a XY Pad to control effects.\n- [Musical Chord Progression Arpeggiator](http://codepen.io/jakealbaugh/full/qNrZyw/) - An app for creating arpeggios with different progressions and styles.\n- [D3 synth](http://roadtolarissa.com/synth/) - A D3 visualization that allows editing a sound loop.\n- [Gibber](http://gibber.mat.ucsb.edu) - is an audiovisual live coding environment for the browser ([github](https://github.com/charlieroberts/Gibber))\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- [Web audio modem](https://martinmelhus.com/web-audio-modem/) - A project showing how to encode and decode data using the web audio API\n- [Music mouse](https://teropa.info/musicmouse/) - A partial emulation by Tero Parviainen of Laurie Spiegel's \"Music Mouse - An Intelligent Instrument\".\n- [AudioNodes](https://audionodes.com/) - Modular audio production suite with multi-track audio mixing, audio effects, parameter automation, MIDI editing, synthesis, cloud production, and more ([download](https://audionodes.com/download), [online version](https://audionodes.com/online))\n- [Psyren Audio / Visual Synthesizer](http://www.bolasol.com/psyren/) - interactively generate psytrance squelches ([github](https://github.com/kbola/psyren))\n\n## Other web audio lists and resources\n- [Chromium Web Audio API Demos](https://chromium.googlecode.com/svn/trunk/samples/audio/samples.html) - Web audio app list curated by the Chromium project members.\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- [Audiocrawl](http://audiocrawl.co/) - A showcase of web audio projects with the possibility of signing up for a monthly newsletter.\n- [Awesome Web Audio](https://github.com/notthetup/awesome-webaudio) - A curated list of Web Audio packages and demos.\n- [Web Audio/MIDI Demo List](http://webaudio.github.io/demo-list/) - A list kept by the W3C audio working group.\n- [10 Virtual Instruments on Browser](http://www.hongkiat.com/blog/virtual-instrument-web-browser/) - 10 Virtual Instruments You Can Play In Your Web Browser.\n- [Output Channel](http://outputchannel.com) - A blog featuring Web Audio tutorials and demos/reviews.\n- [Awesome audio visualization](https://github.com/willianjusten/awesome-audio-visualization) - A list focusing on visualization but also including general web audio libraries, projects, videos and influential people to follow.\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\n\u003ca name=\"disclosure\"\u003e*\u003c/a\u003e: Full disclosure: I am the author of these items.\n\nThe images used in the header of this file were created by Dale Humphries and Yorlmar Campos from the Noun Project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falemangui%2Fweb-audio-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falemangui%2Fweb-audio-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falemangui%2Fweb-audio-resources/lists"}