{"id":2128,"url":"https://github.com/sc0ttj/awesome-javascript-audio","name":"awesome-javascript-audio","description":"JavaScript tools, libraries and components for creating/managing audio, sounds and music","projects_count":192,"last_synced_at":"2026-06-14T22:00:40.939Z","repository":{"id":51646798,"uuid":"260557326","full_name":"sc0ttj/awesome-javascript-audio","owner":"sc0ttj","description":"JavaScript tools, libraries and components for creating/managing audio, sounds and music","archived":false,"fork":false,"pushed_at":"2025-09-04T11:04:16.000Z","size":74,"stargazers_count":45,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-03-27T09:59:15.053Z","etag":null,"topics":["audio","awesome-list","javascript","midi","web-audio","web-audio-api","web-midi","web-midi-api"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sc0ttj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-01T20:59:19.000Z","updated_at":"2026-01-15T16:49:42.000Z","dependencies_parsed_at":"2022-08-22T02:00:15.325Z","dependency_job_id":null,"html_url":"https://github.com/sc0ttj/awesome-javascript-audio","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sc0ttj/awesome-javascript-audio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sc0ttj%2Fawesome-javascript-audio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sc0ttj%2Fawesome-javascript-audio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sc0ttj%2Fawesome-javascript-audio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sc0ttj%2Fawesome-javascript-audio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sc0ttj","download_url":"https://codeload.github.com/sc0ttj/awesome-javascript-audio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sc0ttj%2Fawesome-javascript-audio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31643431,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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"}},"created_at":"2024-01-04T18:28:54.061Z","updated_at":"2026-06-14T22:00:40.939Z","primary_language":"JavaScript","list_of_lists":false,"displayable":true,"categories":["Developer tools","UI components and libraries","Articles and videos","Books","Music theory","Sound creation","Sound editing","MIDI instruments","Complete DAWs","Libraries: Web Audio API","Libraries: Web MIDI API","Sound assets"],"sub_categories":["Web MIDI API","Audio visualization","Music theory","Web Audio API","Instrument recordings","Sound samplers:","ADSR envelopes","Synths","Multi-instruments","React components","Visual waveform generators","Sound effects/processing","Other UI","SoundFonts","Sequencers \u0026 Trackers","Node editors","Piano","Low frequency oscillators (\"LFOs\"):","Pure Data (PD) patches","Sound equalizers","Vocoders","Drum pads / MPC / MPD","Guitar"],"readme":"# Awesome JavaScript Audio\n\nJavaScript tools, libraries and components for creating/managing audio, sounds and music.\n\n## Articles and videos\n\n### Music theory\n\n- [Let's learn about waveforms](https://pudding.cool/2018/02/waveforms/) - really nice interactives to teach waveforms by Pudding.cool [source code](https://github.com/joshwcomeau/waveforms)\n- [The Physics of Music](https://pages.mtu.edu/~suits/Physicsofmusic.html) by Michigen Tech\n- [JS Dynamic Audio Synth Tutorial](https://keithwhor.com/music/) - make a [synth piano keyboard](https://mrcoles.com/piano/) from scratch, covers lots of theory \n- [Principles of Sound Synthesis](http://www.acoustics.salford.ac.uk/acoustics_info/sound_synthesis/) - or, why synths can't do guitars\n- [Drum patterns and exercises](https://www.ethanhein.com/wp/my-nyu-masters-thesis/drum-patterns-and-exercises/) - master thesis by Ethan Hein, with nice circle system \n  - [Video: Play With Your Rhythm - Drum Patterns](https://www.youtube.com/watch?v=tm2BgO1VaRY) - nice explanation of various drums patterns \n  - [Video: Play With Your Rhythm - Build a beat](https://www.youtube.com/watch?v=kpSudIoepgY) - follow up to the above video\n  - [Doc: Play With Your Rhythm](https://docs.google.com/spreadsheets/d/19_3BxUMy3uy1Gb0V8Wc-TcG7q16Amfn6e8QVw4-HuD0/edit#gid=0) - spreadsheet showing notations for all patterns\n- [solfej.io/chords](https://www.solfej.io/chords) - search any chord to hear it, and see how to play on various instruments\n- [solfej.io/scales](https://www.solfej.io/chords) - search any scales to hear it, and see how to play, and which chords are in the scale\n\n### Web Audio API\n\n- [MSDN: Basic concepts behind Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API)\n- [MSDN: Using the Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)\n- [MSDN: Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/)\n- [MSDN: Web Audio, best practices](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices)\n- [HTML5 Rocks: Scheduling Web Audio with Precision](https://www.html5rocks.com/en/tutorials/audio/scheduling/) (web audio performance)\n- [HTML5 Rocks: Developing Game Audio with the Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/games/) - mixing, fixing clipping, 3d sound, ..\n- [MSDN: AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) - generic interface for representing audio (an audio source, filter, gain mixer, output, ...) \n- [MSDN: AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) - a short audio asset residing in memory, created from an audio file\n- [MSDN: AudioBufferSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode) - for audio with stringent timing/accuracy requirements\n- [MSDN: OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) - for generating sounds to buffer, fast as possible, no need to playback\n- [MSDN: Controlling multiple parameters with constantSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode)\n- [MSDN: Creating a simple synth](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Simple_synth)\n- [Drum Sounds in Web Audio](https://dev.opera.com/articles/drum-sounds-webaudio/) - creating drums sounds using the Web Audio API\n- [MSDN: Visualizations with Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)\n- [Visualizations with Audio API and D3](https://blog.scottlogic.com/2016/01/06/audio-api-with-d3.html) - tutorial on music visualisation with D3, [demo](https://wpferg.uk/MusicVisualisation/)\n- [Music frequency visualizer with D3](https://www.bignerdranch.com/blog/music-visualization-with-d3-js/) - nice short guide, with [repo](https://github.com/bignerdranch/music-frequency-d3) and [demo](https://bignerdranch.github.io/music-frequency-d3/)\n- [Visualising Sound with D3](https://medium.com/better-programming/visualizing-sound-with-d3-and-web-audio-api-435ffea88f30) - covers and demos various different visualisations\n\n### Web MIDI API\n\n- [Playing MIDI in JavaScript](https://medium.com/swinginc/playing-with-midi-in-javascript-b6999f2913c3) - lots of good examples and code samples\n- [Web MIDI Examples](https://webmidi-examples.glitch.me/) - nice, short example code snippets\n- [CSS Tricks: Dip your toes into hardware with Web MIDI](https://css-tricks.com/dip-your-toes-into-hardware-with-webmidi/) - covers anatomy of a MIDI signal, MIDI notes\n- [Keith McMillen: Making Music in the Browser with Web MIDI API](https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-midi-api/)\n- [Smashing Magazine: Web MIDI API](https://www.smashingmagazine.com/2018/03/web-midi-api/)\n\n## Books\n\n- [Web Audio API](https://webaudioapi.com/book/Web_Audio_API_Boris_Smus_html/toc.html) - for JS developers, game devs, etc. Written by Boris Smus.\n- [Programming Electronic Music in Pure Data (PD)](http://www.pd-tutorial.com/english/index.html)\n\n## Libraries: Web Audio API\n\n- [howler.js](https://github.com/goldfire/howler.js) - cross-browser audio library, 7kb, with multi-track, caching, falls back to HTML5 audio\n- [webaudio-peaks](https://github.com/naomiaro/webaudio-peaks) - small library to get peaks from audio\n- [kittykatattack/sound.js](https://github.com/kittykatattack/sound.js) - micro library to load, generate and play sounds\n- [notthetup/smoothfade](https://github.com/notthetup/smoothfade) - smooth fade between AudioNodes\n- [scriptify/sountility](https://github.com/scriptify/sountility) - includes many small packages for adding, mixing, toggling effects on AudioNodes\n\n## Libraries: Web MIDI API\n\n- [cwilso/WebMIDIAPIShim](https://github.com/cwilso/WebMIDIAPIShim) - popular polyfill, used by Jazzsoft, among others. [Test it here](https://cwilso.github.io/WebMIDIAPIShim/)\n- [jazz-soft/WebMIDIAPIShim](https://github.com/jazz-soft/WebMIDIAPIShim) - MIDI polyfill for `navigator` in older browsers and Node\n\nThese can play MIDI files, and handle MIDI input/output messages from MIDI instruments, etc:\n\n- [mudcube/MIDI.js](https://github.com/mudcube/MIDI.js) - can play midi files using the given soundFonts\n  - [midi-js-soundfonts](https://github.com/gleitz/midi-js-soundfonts) - pre-rendered, MIDI soundfonts for use with MIDI.js \n- [jazz-soft/JZZ](https://github.com/jazz-soft/JZZ) - MIDI library for Node and Browsers\n- [jazz-soft/web-midi](https://github.com/jazz-soft/web-midi) - WebMIDI API for browsers only\n- [jazz-midi-electron](https://github.com/jazz-soft/jazz-midi-electron) - WebMIDI API for Electron\n- [igorski/zMIDI](https://github.com/igorski/zMIDI) - small MIDI library, an easy interface to working with Web MIDI \n- [colxi/MidiParser](https://github.com/colxi/midi-parser-js) - a binary MIDI file reader for browser/Node, converts a MIDI binary file to a JSON object\n- [grimmdude/MidiWriterJS](https://github.com/grimmdude/MidiWriterJS) - an API for programmatically generating multi-track MIDI files and JSON objects\n- [grimmdude/MidiPlayerJS](https://github.com/grimmdude/MidiPlayerJS) - multi-track MIDI player/parser\n- [hoch/spiral](https://github.com/hoch/spiral) - lightweight WebAudio/WebMIDI library\n- [dingram/jsmidgen](https://github.com/dingram/jsmidgen) - generate MIDI files from javascript\n- [node-easymidi](https://github.com/dinchak/node-easymidi) - a wrapper around [node-midi](https://github.com/justinlatimer/node-midi) to make things easier\n\nThese are tools for managing MIDI instruments (hardware instruments/devices):\n\n- [webmidi](https://github.com/djipco/webmidi) - control MIDI instruments/messages with ease\n- [Midi-Connector](https://github.com/nuc/Midi-Connector) - for connecting your MIDI device to `aconnect` (one of the ALSA tools)\n- [tween-midi-editor](https://github.com/tuomashatakka/tween-midi-editor) - MIDI tween editor\n- [AndrejHronco/midi-ports](https://github.com/AndrejHronco/midi-ports) - small library to manage attached MIDI ports and devices\n- [jazz-soft/JZZ-midi-Gear](https://github.com/jazz-soft/JZZ-midi-Gear) - get info about your MIDI device\n\n## Developer tools\n\n- [google/audion](https://github.com/google/audion) - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes \n- [Pure Data](https://puredata.info/) - develop your own synths and patches\n\n## Music theory\n\nTutorials and teachers:\n\n- [harmonizer](https://github.com/flosSoftware/harmonizer) - interactive piano that teaches harmony and rhythm theory\n- [play-along](https://github.com/bobbyrne01/play-along) - learn the drums using a sequencer-like UI\n- [Keystack](https://github.com/danielgamage/keystack) - A web-based circular visualizer for keyboards (circle of fifths).\n- [funklet](http://funklet.com/) - learn famous drum beats using an interactive sequencer\n- [scribbletune/johann](https://scribbletune.github.io/johann/) - Generate chord \u0026 scale charts to practice - for guitar, piano and PC keyboard ([repo](https://github.com/scribbletune/johann))\n\n## Sound assets\n\nSounds that can be downloaded and used in your JS applications:\n\n### SoundFonts\n\nInstruments and sounds you can attach to MIDI notes (using the Web MIDI API):\n\n- [ryanwhite04/soundfonts](https://github.com/ryanwhite04/soundfonts) - includes [lots of instruments](https://ryanwhite04.github.io/soundfonts/), in mp3 and ogg\n- [surikov/webaudiofont](https://github.com/surikov/webaudiofont) - use full GM set of musical instruments to play MIDI and single sounds or effects\n- [midi-js-soundfonts](https://github.com/gleitz/midi-js-soundfonts) - pre-rendered, MIDI soundfonts for use with MIDI.js \n- [soundfont-player](https://github.com/danigb/soundfont-player) - nice little library for loading and playing sound fonts\n- [danigb/sampler.js](https://github.com/danigb/sampler.js) - simple sampler, defines instruments as JSON, with base64 mp3s in them\n- [sccherry/soundfont](https://github.com/sccherry/soundfont) - soundfont piano player, uses 'FluidR3_GM', 'MusyngKite', 'FatBoy' ([demo](https://stevecherry.net/soundfont/#index))\n- [letoribo/percussion-soundfonts](https://github.com/letoribo/percussion-soundfonts) - soundfonts for JZZ.synth.MIDI.js\n- [timbre_soundfonts.js](https://github.com/skratchdot/timbre.soundfont.js) - soundfonts for [timbre.js](https://github.com/mohayonao/timbre.js/)\n- [PatrickWolleb/SoundFontJS](https://github.com/PatrickWolleb/SoundFontJS) - Node JS CLI for creating MIDI.JS ready sound fonts\n- [colinbdclark/sf2-parser](https://github.com/colinbdclark/sf2-parser) - a SoundFont 2 parser, extracted from [sf2synth.js](https://github.com/gree/sf2synth.js)\n- [montyanderson/soundfont-parser](https://github.com/montyanderson/soundfont-parser) - soundfont parser that gets the detais/contents of .sfz files\n- [midijssf-from-sf2-pmb](https://github.com/mk-pmb/midijssf-from-sf2-pmb) - utilities for converting soundfonts to MIDI.js format\n- [skratchdot/soundfont2mp3](https://github.com/skratchdot/soundfont2mp3) - a command line tool for extracting single note mp3s from soundfont files\n\n### Instrument recordings\n\nHigh quality recordings of instruments, nicely organised into separate files, in MP3, WAV or similar format. \n\n- ?\n\n## Sound creation\n\nProgrammatically create notes, chords, intervals, effects, etc:\n\n- [Tone.js](https://github.com/Tonejs/Tone.js) - A Web Audio framework for making interactive music in the browser\n- [tonejs-instruments](https://github.com/nbrosowsky/tonejs-instruments) - instrument presets for Tone.js\n- [teoria](https://github.com/saebekassebil/teoria) - create notes, chords, scales, intervals.. get notes form intervals, and more..   \n- [octavian](https://github.com/stevekinney/octavian) - utilities for reasoning about musical notes, frequencies, and intervals \n- [Flocking](https://github.com/colinbdclark/Flocking) - declaratively create sounds, synths, effects, etc, as JSON objects, supports mouse/trackpad\n- [scribbletune](https://scribbletune.com/) - generate chord progressions, scales, beats, save as MIDI clips, with [a teacher app](https://github.com/scribbletune/johann) and [sampler](https://github.com/scribbletune/sampler)\n- [btwael/zazate.js](https://github.com/btwael/zazate.js) - make notes, tones, scales, chords, harmonies.. loads of functions\n- [timbre.js](https://github.com/mohayonao/timbre.js/) - JavaScript library for objective sound programming (archived)\n- [midiflip](https://github.com/1j01/midiflip) - transpose, flip, reverse notes, etc\n- [note-parser](https://github.com/danigb/note-parser) - Given a string, obtain a hash with note properties (including midi number and frequency)\n- [simpleTones](https://github.com/escottalexander/simpleTones.js) - create tones of a specfic note - add sawtooth, sine, triangle, etc, to modify\n- [beep.js](https://github.com/stewdio/beep.js) - a JavaScript toolkit for building browser-based synthesizers\n- Also see [LFOs](#LFOs) and [Synths](#Synths) sections.\n\n### Low frequency oscillators (\"LFOs\"):\n\nThese produce sounds which oscillate between two values on a low frequency, following a given waveform. LFOs are usually used to create effects like pitch wobble, tremelo, and wah-wah-wah stuff. These effect are then applied to notes, synths or instruments.\n\n- [TheTeapot418/LFO.js](https://github.com/TheTeapot418/LFO.js) - a simple LFO in JavaScript, includes presets: sine, triangle, square, sawtooth, noise\n- [2xAA/LFO.js](https://github.com/2xAA/LFO.js) - a fork of the above\n- [mohayonao/wave-tables](https://github.com/mohayonao/wave-tables) - JSON files defining various sounds/instruments as wave tables\n- [diversen/wave-table-oscillators](https://github.com/diversen/wave-table-oscillators) - wrappers around the wave tables above (allows you to use them) \n- [audiojs/audio-oscillator](https://github.com/audiojs/audio-oscillator) - Generate periodic oscillation into an array/audiobuffer using a simple API\n- [scijs/periodic-function](https://github.com/scijs/periodic-function) - oscillator modifiers (sawtooth, square, sine, pulse, step, interpolate, etc) as JS functions, normalized 0..1\n\n### Pure Data (PD) patches\n\n- [sebpiq/WebPd](https://github.com/sebpiq/WebPd) - use your [Pure Data](https://puredata.info/) [patches](https://puredata.info/community/member-downloads/patches) in Javascript\n\n## Sound editing\n\n### Sound effects/processing\n\n- [alemangui/pizzicato](https://github.com/alemangui/pizzicato) - excellent sound shaping effects, [nice demos](https://alemangui.github.io/pizzicato/) showing guitar sounds\n- [wad](https://github.com/rserota/wad) - advanced processing/manipulating of sound files\n- [tuna](https://github.com/Theodeus/tuna) - an audio effects library for the Web Audio API\n- [scriptify/Chnl](https://github.com/scriptify/Chnl) - makes it easy to attach lots of effects to a single AudioNode of any kind\n\n### Sound samplers:\n\nSamplers make it easy to import, chop up, and extract parts of an audio file (usually WAV or MP3).\n\n- [waveform-playlist](https://github.com/naomiaro/waveform-playlist) - very nice multi-track WAV editor, similar to Audacity :)\n- [hya-wave](https://wav.hya.io/#/fx) - nice online WAV editor\n\n### ADSR envelopes \n\nModify a sound with more/less attack, delay, sustain, release, etc.\n\n- [audio-contour](https://www.npmjs.com/package/audio-contour) - A 5 stage audio envelope generator.. nice UI to edit WAV forms\n- [mohayonao/adsr-envelope](https://github.com/mohayonao/adsr-envelope) - attack, delay, sustain, release and MORE, lots of options\n- [itsjoesullivan/envelope-generator](https://github.com/itsjoesullivan/envelope-generator) - nice and complete, lots of options\n- [mmckegg/adsr](https://github.com/mmckegg/adsr) - attack, delay, sustain, release envelopes\n\n### Sound equalizers\n\n- [GraphicalFilterEditor](https://github.com/carlosrafaelgn/GraphicalFilterEditor) - very powerful sound shaping :)\n- [eAudio](https://github.com/DIDAVA/eAudio) - the \"Extended HTML Audio Object\" - adds an equalizier\n\n### Vocoders\n\nFor Editing and adding effects to vocals.\n\n- [cwilso/vocoder](https://github.com/cwilso/vocoder) - a 28-band vocoder - a \"robotic voice\" processor\n\n## MIDI instruments\n\nFrontends and UIs to load \u0026 your play your sounds.\n\n### Drum pads / MPC / MPD\n\n- [completejavascript/drum-machine](https://github.com/completejavascript/drum-machine) - simple react based MPD\n- [dusanpopov/Drum-machine](https://github.com/dusanpopov/Drum-machine) - an AKAI-like MPC\n- [Introduction-to-Programming-Term-1-Project](https://github.com/wtznc/Introduction-to-Programming-Term-1-Project) - USB MIDI drum pad and keyboard, uses `p5`, `ZMIDI`\n- [webmaeistro/drum-machine](https://github.com/webmaeistro/drum-machine) - nice, simple one, no lag, works well\n- [electric-drums-pwa](https://github.com/1XWebbyX1/electric-drums-pwa) - simple, buttons at bottom, good performance\n- [dburles/ssu16](https://github.com/dburles/ssu16) - very slick Akai-like MPC, with step sequencing, sample import, much more\n- [cwilso/MIDIDrums](https://github.com/cwilso/MIDIDrums) - MIDI version of Shiny Drum Machine \n\n### Guitar\n\n- [1j01/guitar](https://github.com/1j01/guitar) - drag over the strings to play\n- [ronkot/ks-guitar](https://github.com/ronkot/ks-guitar) - play chords with keyboard keys, and strum with up/down keys\n- [vitaliy-bobrov/js-rocks](https://github.com/vitaliy-bobrov/js-rocks) - lots of nice electric guitar effects, amps and cabinets\n\n### Piano\n\n- [midi-with-node](https://github.com/Pomax/midi-with-node) - a web based GUI \u0026 NodeJS backend that can register as a MIDI device in your DAW\n- [TomerAberbach/piano](https://github.com/TomerAberbach/piano) - very nice sounding piano, simple UI\n- [qwerty-hancock](https://github.com/stuartmemo/qwerty-hancock) - simple JS piano component for larger projects, see [qwerty hancock](https://stuartmemo.com/qwerty-hancock/)\n- [tri-chromatic-keyboard](https://github.com/1j01/tri-chromatic-keyboard) - nice, easy way to play piano for those who _can't_ play piano (different key layout)\n- [Wscats/piano](https://github.com/Wscats/piano) - nice piano, decent sounds, can make it play for you\n- [WarpPrism/AutoPiano](https://github.com/WarpPrism/AutoPiano) - feature-packed, large piano\n- [iBundin/Open-Web-Piano](https://github.com/iBundin/Open-Web-Piano) - nice piano, user-friendly: supports choosing a MIDI device on load\n- [noodle-doodle](https://github.com/Pomax/noodle-doodle) - a nice piano roll, [demo here](https://pomax.github.io/noodle-doodle/) \n\n### Sequencers \u0026 Trackers\n\nUse (often) grid-based, stepped/looping sequencer UIs to generate beats, riffs, bass-lines, loops and so on.\n\n- [efflux-tracker](https://github.com/igorski/efflux-tracker) - browser based music tracker ([here](https://www.igorski.nl/application/efflux/)) driving a modular synth environment with MIDI support\n- [web-drum-sequencer](https://github.com/stufreen/web-drum-sequencer) - A drum machine and sequencer built with the Web Audio API, React, and Redux\n- [da-beat-sequencer](https://github.com/juniorheptachords/da-beat-sequencer) - lightweight MIDI and audio sequencer\n- [drum-sequencer](https://github.com/bweave/drum-sequencer) - lightweight sequencer, simple UI\n- [drum-machine](https://github.com/GK-Hynes/drum-machine) - simple sequencer, based on React\n- [hatsumatsu/108](https://github.com/hatsumatsu/108) - a slick, minimalist circular beat sequencer\n- [tinysynth](https://github.com/n1k0/tinysynth) - a nice little sequencer, easy to use, nice UI, generate random tracks\n- [nicolas-van/sonant-x-live](https://github.com/nicolas-van/sonant-x-live) - piano keyboard, filters, synth, sequencer, uses [sonant-x](https://github.com/nicolas-van/sonant-x)\n- [andrefcasimiro/midikrew](https://github.com/andrefcasimiro/midikrew) - full fledged music sequencer, built with React\n- [SpessaSynth](https://github.com/spessasus/SpessaSynth) - MIDI player with tracker, loads of settings\n\n### Synths\n\nGenerate and edit your own sounds, voices and sound effects.\n\n- [jssynth](https://github.com/jstrait/jssynth) - powerful synth and sequencer\n- [sf2synth.js](https://github.com/logue/sf2synth.js) - a WebMidiLink based synthesizer with SoundFont support\n- [okaybenji/submono](https://github.com/okaybenji/submono) - small mono-voice (monophonic) synth, define sounds as JS objects\n- [okaybenji/subpoly](https://github.com/okaybenji/subpoly) - small multi-voice (polyphonic) synth, define sounds as JS objects\n- [nicolas-van/sonant-x](https://github.com/nicolas-van/sonant-x) - lightweight synth library\n- [ronkot/ks-guitar-synth](https://github.com/ronkot/ks-guitar-synth) - guitair synth, using [Karplus-Strong](http://en.wikipedia.org/wiki/Karplus%E2%80%93Strong_string_synthesis) algorithm. See [ks-guitar](https://github.com/ronkot/ks-guitar) for UI.\n- [webaudio-tinysynth](https://github.com/g200kg/webaudio-tinysynth) - webaudio-tinysynth is a small synthesizer written in JavaScript with GM like timbre map\n- [diversen/pluggable-synth](https://github.com/diversen/pluggable-synth) - small synth, lightweight piano UI, supports MIDI or keyboard\n- [Tinusw/webAudioSynth](https://github.com/Tinusw/webAudioSynth) - has 2 oscillators with XY pads, and a piano keyboard\n- [hundredrabbits/Marabu](https://github.com/hundredrabbits/Marabu) - powerful synth, with GUI\n- [errozero/poly-synth](https://github.com/errozero/poly-synth) - fully-fledged synth, with GUI, presets, etc\n- [ZulfadhliM/web-synth](https://github.com/ZulfadhliM/web-synth) - basic synth with LFO modulation and XY pad, React-based\n- [stevengoldberg/juno106](https://github.com/stevengoldberg/juno106) - a Roland Juno 106 synth\n- [kevin-chau/minimoog.js](https://github.com/kevin-chau/minimoog.js) - a Minimoog synth\n- [francoisgeorgy/BS2-Web](https://github.com/francoisgeorgy/BS2-Web) - a very polished web interface for the BassStation II synth\n- [d3-synth](https://roadtolarissa.com/synth/) - synth sounds, with circular tracker UI. Very nice, clean code\n\n### Multi-instruments\n\nThese are more complete - they have multiple instruments.\n\n- [midi-sounds-react](https://github.com/surikov/midi-sounds-react) - nice examples of using soundfonts, includes a simple music sequencer\n- [WebMIDICon](https://github.com/dtinth/WebMIDICon) - nice collection of online instruments\n- [terrible-techno](https://terrible-techno.firebaseapp.com/) - nice UI\n\n## Complete DAWs\n\nA \"DAW\" is a digital audio workstation - an all-round music production app\n\n- [gridsound](https://github.com/gridsound/daw) - a lovely open source DAW, uses Web Audio API\n- [audionodes](https://audionodes.com/online/) - very user-friendly, node editor based DAW (not open source)\n- [TReactor](https://github.com/kevin-chau/TReactr) - a Traktor clone, written in React\n- [XinDaw](https://github.com/dotgreg/XinDaw) - a multiscreen Web-based DAW designed for audio\u0026video live performances (Tone.js/React/Meteor)\n- [zrythm](https://github.com/zrythm/zrythm) - requires isgn up. A highly automated and intuitive DAW\n- [audiotool](https://www.audiotool.com/) - requires sign up. Lots of tools and features, also available as a Chrome extension\n- [soundation](https://soundation.com/) - requires sign up. Sleek looking DAW, looks similar to Non-DAW\n\n## UI components and libraries\n\n### React components\n\n- [r-audio](https://github.com/bbc/r-audio) - WebAudio API using JSX\n- [react-music](https://www.npmjs.com/package/react-music) - define sounds, effects, etc, using JSX\n- [kedromelon/mdlr](https://github.com/kedromelon/mdlr) - like above, but more for sound generation (oscillators, tones, waveforms, synths) \n- [react-midi-device-provider](https://github.com/halvves/react-midi-device-provider) - simple MIDI device/messages handler for react\n- [TReactor](https://github.com/kevin-chau/TReactr) - a Traktor clone, written in React\n- [midi-sounds-react](https://www.npmjs.com/package/midi-sounds-react) - 1500 instruments\n\n### Visual waveform generators\n\n- [bbc/peaks.js](https://github.com/bbc/peaks.js) - UI component for interacting with waveforms\n- [katspaugh/wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - generate navigable waveforms\n- [audio-to-svg-waveform](https://github.com/invokemedia/audio-to-svg-waveform) - simple, generates SVGs, nothing else\n- [patidar-suresh/audio-waveform](https://github.com/patidar-suresh/audio-waveform) - uses HTML5 Canvas and requestAnimationFrame\n- [WFPlayer](https://github.com/zhw2590582/WFPlayer) - an audio waveform generator, nice features\n- [audio-oscilloscope](https://github.com/mathiasvr/audio-oscilloscope) - waveform vizualiser for HTML5 Canvas\n- [waveplayer.js](https://github.com/michaeldzjap/waveplayer.js) - mp3 player that produces wavforms\n- [chrisweb/waveform-visualizer](https://github.com/chrisweb/waveform-visualizer) - waveform generator\n\n### Node editors\n\nAlso known as \"graph editors\".\n\nLink your sounds, effects, inputs \u0026 outputs together with a drag and drop interface:\n\n- [g200kg/WebAudioDesigner](https://github.com/g200kg/WebAudioDesigner) - nice node based sound designer [demo](https://g200kg.github.io/WebAudioDesigner/)\n- [cwilso/WebAudio](https://github.com/cwilso/WebAudio) - awesome, easy-to-use node editor, with [demo](https://webaudioplayground.appspot.com)\n- [tai2/webaudiocomposer](https://github.com/tai2/webaudiocomposer) - audio node-editor with a patch-based UI, like Quartz composer\n- [dataflow-webaudio](https://github.com/forresto/dataflow-webaudio) - Dataflow graph editor + Web Audio API - [demo](https://forresto.github.io/dataflow-webaudio/)\n\n### Audio visualization\n\n- [margox/vudio.js](https://github.com/margox/vudio.js) - very nice bouncing bars, can place or align at top, bottom, left, right or center\n- [pts.js](https://ptsjs.org/) - a powerful creative coding and visualization library\n- [kelvinau/circular-audio-wave](https://github.com/kelvinau/circular-audio-wave) - circular audio waves powered by E-charts\n- [preziotte/party-mode](https://github.com/preziotte/party-mode) - a d3 based visualizer with lots of options\n\n### Other UI \n\n- [g200kg/input-knobs](https://github.com/g200kg/input-knobs) - turns `\u003cinput\u003e` tags into sliders, knobs, etc\n- [g200kg/webaudio-controls](https://github.com/g200kg/webaudio-controls) - web components aimed at VST instruments, DAWs, etc\n- [paulrosen/abcjs](https://github.com/paulrosen/abcjs) - for rendering music notation\n- [williamfields/nofft.js](https://github.com/williamfields/nofft.js) - Javascript library for creating MIDI-responsive visuals\n- [nexus-js/ui](https://github.com/nexus-js/ui) - very nice UI toolkit for web based MIDI instrument [UI components](https://nexus-js.github.io/ui/) (used by nofft, above)\n- [ISNIT0/webaudio-generator](https://github.com/ISNIT0/webaudio-generator) - a UI for generating Web Audio API code\n\n\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/sc0ttj%2Fawesome-javascript-audio/projects"}