└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Awesome JavaScript Audio 2 | 3 | JavaScript tools, libraries and components for creating/managing audio, sounds and music. 4 | 5 | ## Articles and videos 6 | 7 | ### Music theory 8 | 9 | - [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) 10 | - [The Physics of Music](https://pages.mtu.edu/~suits/Physicsofmusic.html) by Michigen Tech 11 | - [JS Dynamic Audio Synth Tutorial](https://keithwhor.com/music/) - make a [synth piano keyboard](https://mrcoles.com/piano/) from scratch, covers lots of theory 12 | - [Principles of Sound Synthesis](http://www.acoustics.salford.ac.uk/acoustics_info/sound_synthesis/) - or, why synths can't do guitars 13 | - [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 14 | - [Video: Play With Your Rhythm - Drum Patterns](https://www.youtube.com/watch?v=tm2BgO1VaRY) - nice explanation of various drums patterns 15 | - [Video: Play With Your Rhythm - Build a beat](https://www.youtube.com/watch?v=kpSudIoepgY) - follow up to the above video 16 | - [Doc: Play With Your Rhythm](https://docs.google.com/spreadsheets/d/19_3BxUMy3uy1Gb0V8Wc-TcG7q16Amfn6e8QVw4-HuD0/edit#gid=0) - spreadsheet showing notations for all patterns 17 | - [solfej.io/chords](https://www.solfej.io/chords) - search any chord to hear it, and see how to play on various instruments 18 | - [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 19 | 20 | ### Web Audio API 21 | 22 | - [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) 23 | - [MSDN: Using the Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) 24 | - [MSDN: Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/) 25 | - [MSDN: Web Audio, best practices](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices) 26 | - [HTML5 Rocks: Scheduling Web Audio with Precision](https://www.html5rocks.com/en/tutorials/audio/scheduling/) (web audio performance) 27 | - [HTML5 Rocks: Developing Game Audio with the Web Audio API](https://www.html5rocks.com/en/tutorials/webaudio/games/) - mixing, fixing clipping, 3d sound, .. 28 | - [MSDN: AudioNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode) - generic interface for representing audio (an audio source, filter, gain mixer, output, ...) 29 | - [MSDN: AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) - a short audio asset residing in memory, created from an audio file 30 | - [MSDN: AudioBufferSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode) - for audio with stringent timing/accuracy requirements 31 | - [MSDN: OfflineAudioContext](https://developer.mozilla.org/en-US/docs/Web/API/OfflineAudioContext) - for generating sounds to buffer, fast as possible, no need to playback 32 | - [MSDN: Controlling multiple parameters with constantSourceNode](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) 33 | - [MSDN: Creating a simple synth](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Simple_synth) 34 | - [Drum Sounds in Web Audio](https://dev.opera.com/articles/drum-sounds-webaudio/) - creating drums sounds using the Web Audio API 35 | - [MSDN: Visualizations with Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) 36 | - [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/) 37 | - [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/) 38 | - [Visualising Sound with D3](https://medium.com/better-programming/visualizing-sound-with-d3-and-web-audio-api-435ffea88f30) - covers and demos various different visualisations 39 | 40 | ### Web MIDI API 41 | 42 | - [Web MIDI Examples](https://webmidi-examples.glitch.me/) - nice, short example code snippets 43 | - [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 44 | - [Keith McMillen: Making Music in the Browser with Web MIDI API](https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-midi-api/) 45 | - [Smashing Magazine: Web MIDI API](https://www.smashingmagazine.com/2018/03/web-midi-api/) 46 | 47 | ## Books 48 | 49 | - [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. 50 | - [Programming Electronic Music in Pure Data (PD)](http://www.pd-tutorial.com/english/index.html) 51 | 52 | ## Libraries: Web Audio API 53 | 54 | - [howler.js](https://github.com/goldfire/howler.js) - cross-browser audio library, 7kb, with multi-track, caching, falls back to HTML5 audio 55 | - [webaudio-peaks](https://github.com/naomiaro/webaudio-peaks) - small library to get peaks from audio 56 | - [kittykatattack/sound.js](https://github.com/kittykatattack/sound.js) - micro library to load, generate and play sounds 57 | - [notthetup/smoothfade](https://github.com/notthetup/smoothfade) - smooth fade between AudioNodes 58 | - [scriptify/sountility](https://github.com/scriptify/sountility) - includes many small packages for adding, mixing, toggling effects on AudioNodes 59 | 60 | ## Libraries: Web MIDI API 61 | 62 | - [cwilso/WebMIDIAPIShim](https://github.com/cwilso/WebMIDIAPIShim) - popular polyfill, used by Jazzsoft, among others. [Test it here](https://cwilso.github.io/WebMIDIAPIShim/) 63 | - [jazz-soft/WebMIDIAPIShim](https://github.com/jazz-soft/WebMIDIAPIShim) - MIDI polyfill for `navigator` in older browsers and Node 64 | 65 | These can play MIDI files, and handle MIDI input/output messages from MIDI instruments, etc: 66 | 67 | - [mudcube/MIDI.js](https://github.com/mudcube/MIDI.js) - can play midi files using the given soundFonts 68 | - [midi-js-soundfonts](https://github.com/gleitz/midi-js-soundfonts) - pre-rendered, MIDI soundfonts for use with MIDI.js 69 | - [jazz-soft/JZZ](https://github.com/jazz-soft/JZZ) - MIDI library for Node and Browsers 70 | - [jazz-soft/web-midi](https://github.com/jazz-soft/web-midi) - WebMIDI API for browsers only 71 | - [jazz-midi-electron](https://github.com/jazz-soft/jazz-midi-electron) - WebMIDI API for Electron 72 | - [igorski/zMIDI](https://github.com/igorski/zMIDI) - small MIDI library, an easy interface to working with Web MIDI 73 | - [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 74 | - [grimmdude/MidiWriterJS](https://github.com/grimmdude/MidiWriterJS) - an API for programmatically generating multi-track MIDI files and JSON objects 75 | - [grimmdude/MidiPlayerJS](https://github.com/grimmdude/MidiPlayerJS) - multi-track MIDI player/parser 76 | - [hoch/spiral](https://github.com/hoch/spiral) - lightweight WebAudio/WebMIDI library 77 | - [dingram/jsmidgen](https://github.com/dingram/jsmidgen) - generate MIDI files from javascript 78 | - [node-easymidi](https://github.com/dinchak/node-easymidi) - a wrapper around [node-midi](https://github.com/justinlatimer/node-midi) to make things easier 79 | 80 | These are tools for managing MIDI instruments (hardware instruments/devices): 81 | 82 | - [webmidi](https://github.com/djipco/webmidi) - control MIDI instruments/messages with ease 83 | - [Midi-Connector](https://github.com/nuc/Midi-Connector) - for connecting your MIDI device to `aconnect` (one of the ALSA tools) 84 | - [tween-midi-editor](https://github.com/tuomashatakka/tween-midi-editor) - MIDI tween editor 85 | - [AndrejHronco/midi-ports](https://github.com/AndrejHronco/midi-ports) - small library to manage attached MIDI ports and devices 86 | - [jazz-soft/JZZ-midi-Gear](https://github.com/jazz-soft/JZZ-midi-Gear) - get info about your MIDI device 87 | 88 | ## Developer tools 89 | 90 | - [google/audion](https://github.com/google/audion) - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes 91 | - [Pure Data](https://puredata.info/) - develop your own synths and patches 92 | 93 | ## Music theory 94 | 95 | Tutorials and teachers: 96 | 97 | - [harmonizer](https://github.com/flosSoftware/harmonizer) - interactive piano that teaches harmony and rhythm theory 98 | - [play-along](https://github.com/bobbyrne01/play-along) - learn the drums using a sequencer-like UI 99 | - [Keystack](https://github.com/danielgamage/keystack) - A web-based circular visualizer for keyboards (circle of fifths). 100 | - [funklet](http://funklet.com/) - learn famous drum beats using an interactive sequencer 101 | - [scribbletune/johann](https://scribbletune.github.io/johann/) - Generate chord & scale charts to practice - for guitar, piano and PC keyboard ([repo](https://github.com/scribbletune/johann)) 102 | 103 | ## Sound assets 104 | 105 | Sounds that can be downloaded and used in your JS applications: 106 | 107 | ### SoundFonts 108 | 109 | Instruments and sounds you can attach to MIDI notes (using the Web MIDI API): 110 | 111 | - [ryanwhite04/soundfonts](https://github.com/ryanwhite04/soundfonts) - includes [lots of instruments](https://ryanwhite04.github.io/soundfonts/), in mp3 and ogg 112 | - [surikov/webaudiofont](https://github.com/surikov/webaudiofont) - use full GM set of musical instruments to play MIDI and single sounds or effects 113 | - [midi-js-soundfonts](https://github.com/gleitz/midi-js-soundfonts) - pre-rendered, MIDI soundfonts for use with MIDI.js 114 | - [soundfont-player](https://github.com/danigb/soundfont-player) - nice little library for loading and playing sound fonts 115 | - [danigb/sampler.js](https://github.com/danigb/sampler.js) - simple sampler, defines instruments as JSON, with base64 mp3s in them 116 | - [sccherry/soundfont](https://github.com/sccherry/soundfont) - soundfont piano player, uses 'FluidR3_GM', 'MusyngKite', 'FatBoy' ([demo](https://stevecherry.net/soundfont/#index)) 117 | - [letoribo/percussion-soundfonts](https://github.com/letoribo/percussion-soundfonts) - soundfonts for JZZ.synth.MIDI.js 118 | - [timbre_soundfonts.js](https://github.com/skratchdot/timbre.soundfont.js) - soundfonts for [timbre.js](https://github.com/mohayonao/timbre.js/) 119 | - [PatrickWolleb/SoundFontJS](https://github.com/PatrickWolleb/SoundFontJS) - Node JS CLI for creating MIDI.JS ready sound fonts 120 | - [colinbdclark/sf2-parser](https://github.com/colinbdclark/sf2-parser) - a SoundFont 2 parser, extracted from [sf2synth.js](https://github.com/gree/sf2synth.js) 121 | - [montyanderson/soundfont-parser](https://github.com/montyanderson/soundfont-parser) - soundfont parser that gets the detais/contents of .sfz files 122 | - [midijssf-from-sf2-pmb](https://github.com/mk-pmb/midijssf-from-sf2-pmb) - utilities for converting soundfonts to MIDI.js format 123 | - [skratchdot/soundfont2mp3](https://github.com/skratchdot/soundfont2mp3) - a command line tool for extracting single note mp3s from soundfont files 124 | 125 | ### Instrument recordings 126 | 127 | High quality recordings of instruments, nicely organised into seprate files, in MP3, WAV or similar format. 128 | 129 | - ? 130 | 131 | ## Sound creation 132 | 133 | Programmatically create notes, chords, intervals, effects, etc: 134 | 135 | - [Tone.js](https://github.com/Tonejs/Tone.js) - A Web Audio framework for making interactive music in the browser 136 | - [tonejs-instruments](https://github.com/nbrosowsky/tonejs-instruments) - instrument presets for Tone.js 137 | - [teoria](https://github.com/saebekassebil/teoria) - create notes, chords, scales, intervals.. get notes form intervals, and more.. 138 | - [octavian](https://github.com/stevekinney/octavian) - utilities for reasoning about musical notes, frequencies, and intervals 139 | - [Flocking](https://github.com/colinbdclark/Flocking) - declaratively create sounds, synths, effects, etc, as JSON objects, supports mouse/trackpad 140 | - [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) 141 | - [btwael/zazate.js](https://github.com/btwael/zazate.js) - make notes, tones, scales, chords, harmonies.. loads of functions 142 | - [timbre.js](https://github.com/mohayonao/timbre.js/) - JavaScript library for objective sound programming (archived) 143 | - [midiflip](https://github.com/1j01/midiflip) - transpose, flip, reverse notes, etc 144 | - [note-parser](https://github.com/danigb/note-parser) - Given a string, obtain a hash with note properties (including midi number and frequency) 145 | - [simpleTones](https://github.com/escottalexander/simpleTones.js) - create tones of a specfic note - add sawtooth, sine, triangle, etc, to modify 146 | - [beep.js](https://github.com/stewdio/beep.js) - a JavaScript toolkit for building browser-based synthesizers 147 | - Also see [LFOs](#LFOs) and [Synths](#Synths) sections. 148 | 149 | ### Low frequency oscillators ("LFOs"): 150 | 151 | These 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. 152 | 153 | - [TheTeapot418/LFO.js](https://github.com/TheTeapot418/LFO.js) - a simple LFO in JavaScript, includes presets: sine, triangle, square, sawtooth, noise 154 | - [2xAA/LFO.js](https://github.com/2xAA/LFO.js) - a fork of the above 155 | - [mohayonao/wave-tables](https://github.com/mohayonao/wave-tables) - JSON files defining various sounds/instruments as wave tables 156 | - [diversen/wave-table-oscillators](https://github.com/diversen/wave-table-oscillators) - wrappers around the wave tables above (allows you to use them) 157 | - [audiojs/audio-oscillator](https://github.com/audiojs/audio-oscillator) - Generate periodic oscillation into an array/audiobuffer using a simple API 158 | - [scijs/periodic-function](https://github.com/scijs/periodic-function) - oscillator modifiers (sawtooth, square, sine, pulse, step, interpolate, etc) as JS functions, normalized 0..1 159 | 160 | ### Pure Data (PD) patches 161 | 162 | - [sebpiq/WebPd](https://github.com/sebpiq/WebPd) - use your [Pure Data](https://puredata.info/) [patches](https://puredata.info/community/member-downloads/patches) in Javascript 163 | 164 | ## Sound editing 165 | 166 | ### Sound effects/processing 167 | 168 | - [alemangui/pizzicato](https://github.com/alemangui/pizzicato) - excellent sound shaping effects, [nice demos](https://alemangui.github.io/pizzicato/) showing guitar sounds 169 | - [wad](https://github.com/rserota/wad) - advanced processing/manipulating of sound files 170 | - [tuna](https://github.com/Theodeus/tuna) - an audio effects library for the Web Audio API 171 | - [scriptify/Chnl](https://github.com/scriptify/Chnl) - makes it easy to attach lots of effects to a single AudioNode of any kind 172 | 173 | ### Sound samplers: 174 | 175 | Samplers make it easy to import, chop up, and extract parts of an audio file (usually WAV or MP3). 176 | 177 | - [waveform-playlist](https://github.com/naomiaro/waveform-playlist) - very nice multi-track WAV editor, similar to Audacity :) 178 | - [hya-wave](https://wav.hya.io/#/fx) - nice online WAV editor 179 | 180 | ### ADSR envelopes 181 | 182 | Modify a sound with more/less attack, delay, sustain, release, etc. 183 | 184 | - [audio-contour](https://www.npmjs.com/package/audio-contour) - A 5 stage audio envelope generator.. nice UI to edit WAV forms 185 | - [adsr-envelope](https://github.com/mohayonao/adsr-envelope) - attack, delay, sustain, release and MORE, lots of options 186 | - [envelope-generator](https://github.com/itsjoesullivan/envelope-generator) - nice and complete, lots of options 187 | - [adsr](https://github.com/mmckegg/adsr) - attack, delay, sustain, release envelopes 188 | 189 | ### Sound equalizers 190 | 191 | - [GraphicalFilterEditor](https://github.com/carlosrafaelgn/GraphicalFilterEditor) - very powerful sound shaping :) 192 | - [eAudio](https://github.com/DIDAVA/eAudio) - the "Extended HTML Audio Object" - adds an equalizier 193 | 194 | ### Vocoders 195 | 196 | For Editing and adding effects to vocals. 197 | 198 | - [cwilso/vocoder](https://github.com/cwilso/vocoder) - a 28-band vocoder - a "robotic voice" processor 199 | 200 | ## MIDI instruments 201 | 202 | Frontends and UIs to load & your play your sounds. 203 | 204 | ### Drum pads / MPC / MPD 205 | 206 | - [completejavascript/drum-machine](https://github.com/completejavascript/drum-machine) - simple react based MPD 207 | - [dusanpopov/Drum-machine](https://github.com/dusanpopov/Drum-machine) - an AKAI-like MPC 208 | - [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` 209 | - [webmaeistro/drum-machine](https://github.com/webmaeistro/drum-machine) - nice, simple one, no lag, works well 210 | - [electric-drums-pwa](https://github.com/1XWebbyX1/electric-drums-pwa) - simple, buttons at bottom, good performance 211 | - [dburles/ssu16](https://github.com/dburles/ssu16) - very slick Akai-like MPC, with step sequencing, sample import, much more 212 | - [cwilso/MIDIDrums](https://github.com/cwilso/MIDIDrums) - MIDI version of Shiny Drum Machine 213 | 214 | ### Guitar 215 | 216 | - [1j01/guitar](https://github.com/1j01/guitar) - drag over the strings to play 217 | - [ronkot/ks-guitar](https://github.com/ronkot/ks-guitar) - play chords with keyboard keys, and strum with up/down keys 218 | - [vitaliy-bobrov/js-rocks](https://github.com/vitaliy-bobrov/js-rocks) - lots of nice electric guitar effects, amps and cabinets 219 | 220 | ### Piano 221 | 222 | - [midi-with-node](https://github.com/Pomax/midi-with-node) - a web based GUI & NodeJS backend that can register as a MIDI device in your DAW 223 | - [TomerAberbach/piano](https://github.com/TomerAberbach/piano) - very nice sounding piano, simple UI 224 | - [qwerty-hancock](https://github.com/stuartmemo/qwerty-hancock) - simple JS piano component for larger projects, see [qwerty hancock](https://stuartmemo.com/qwerty-hancock/) 225 | - [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) 226 | - [Wscats/piano](https://github.com/Wscats/piano) - nice piano, decent sounds, can make it play for you 227 | - [WarpPrism/AutoPiano](https://github.com/WarpPrism/AutoPiano) - feature-packed, large piano 228 | - [iBundin/Open-Web-Piano](https://github.com/iBundin/Open-Web-Piano) - nice piano, user-friendly: supports choosing a MIDI device on load 229 | - [noodle-doodle](https://github.com/Pomax/noodle-doodle) - a nice piano roll, [demo here](https://pomax.github.io/noodle-doodle/) 230 | 231 | ### Sequencers & Trackers 232 | 233 | Use (often) grid-based, stepped/looping sequencer UIs to generate beats, riffs, bass-lines, loops and so on. 234 | 235 | - [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 236 | - [web-drum-sequencer](https://github.com/stufreen/web-drum-sequencer) - A drum machine and sequencer built with the Web Audio API, React, and Redux 237 | - [da-beat-sequencer](https://github.com/juniorheptachords/da-beat-sequencer) - lightweight MIDI and audio sequencer 238 | - [drum-sequencer](https://github.com/bweave/drum-sequencer) - lightweight sequencer, simple UI 239 | - [drum-machine](https://github.com/GK-Hynes/drum-machine) - simple sequencer, based on React 240 | - [hatsumatsu/108](https://github.com/hatsumatsu/108) - a slick, minimalist circular beat sequencer 241 | - [tinysynth](https://github.com/n1k0/tinysynth) - a nice little sequencer, easy to use, nice UI, generate random tracks 242 | - [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) 243 | - [andrefcasimiro/midikrew](https://github.com/andrefcasimiro/midikrew) - full fledged music sequencer, built with React 244 | 245 | ### Synths 246 | 247 | Generate and edit your own sounds, voices and sound effects. 248 | 249 | - [jssynth](https://github.com/jstrait/jssynth) - powerful synth and sequencer 250 | - [sf2synth.js](https://github.com/logue/sf2synth.js) - a WebMidiLink based synthesizer with SoundFont support 251 | - [okaybenji/submono](https://github.com/okaybenji/submono) - small mono-voice (monophonic) synth, define sounds as JS objects 252 | - [okaybenji/subpoly](https://github.com/okaybenji/subpoly) - small multi-voice (polyphonic) synth, define sounds as JS objects 253 | - [nicolas-van/sonant-x](https://github.com/nicolas-van/sonant-x) - lightweight synth library 254 | - [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. 255 | - [webaudio-tinysynth](https://github.com/g200kg/webaudio-tinysynth) - webaudio-tinysynth is a small synthesizer written in JavaScript with GM like timbre map 256 | - [diversen/pluggable-synth](https://github.com/diversen/pluggable-synth) - small synth, lightweight piano UI, supports MIDI or keyboard 257 | - [Tinusw/webAudioSynth](https://github.com/Tinusw/webAudioSynth) - has 2 oscillators with XY pads, and a piano keyboard 258 | - [hundredrabbits/Marabu](https://github.com/hundredrabbits/Marabu) - powerful synth, with GUI 259 | - [errozero/poly-synth](https://github.com/errozero/poly-synth) - fully-fledged synth, with GUI, presets, etc 260 | - [ZulfadhliM/web-synth](https://github.com/ZulfadhliM/web-synth) - basic synth with LFO modulation and XY pad, React-based 261 | - [stevengoldberg/juno106](https://github.com/stevengoldberg/juno106) - a Roland Juno 106 synth 262 | - [kevin-chau/minimoog.js](https://github.com/kevin-chau/minimoog.js) - a Minimoog synth 263 | - [francoisgeorgy/BS2-Web](https://github.com/francoisgeorgy/BS2-Web) - a very polished web interface for the BassStation II synth 264 | - [d3-synth](https://roadtolarissa.com/synth/) - synth sounds, with circular tracker UI. Very nice, clean code 265 | 266 | ### Multi-instruments 267 | 268 | These are more complete - they have multiple instruments. 269 | 270 | - [midi-sounds-react](https://github.com/surikov/midi-sounds-react) - nice examples of using soundfonts, includes a simple music sequencer 271 | - [WebMIDICon](https://github.com/dtinth/WebMIDICon) - nice collection of online instruments 272 | - [terrible-techno](https://terrible-techno.firebaseapp.com/) - nice UI 273 | 274 | ## Complete DAWs 275 | 276 | A "DAW" is a digital audio workstation - an all-round music production app 277 | 278 | - [gridsound](https://github.com/gridsound/daw) - a lovely open source DAW, uses Web Audio API 279 | - [audionodes](https://audionodes.com/online/) - very user-friendly, node editor based DAW (not open source) 280 | - [TReactor](https://github.com/kevin-chau/TReactr) - a Traktor clone, written in React 281 | - [XinDaw](https://github.com/dotgreg/XinDaw) - a multiscreen Web-based DAW designed for audio&video live performances (Tone.js/React/Meteor) 282 | - [zrythm](https://github.com/zrythm/zrythm) - requires isgn up. A highly automated and intuitive DAW 283 | - [audiotool](https://www.audiotool.com/) - requires sign up. Lots of tools and features, also available as a Chrome extension 284 | - [soundation](https://soundation.com/) - requires sign up. Sleek looking DAW, looks similar to Non-DAW 285 | 286 | ## UI components and libraries 287 | 288 | ### React components 289 | 290 | - [react-music](https://www.npmjs.com/package/react-music) - define sounds, effects, etc, using JSX 291 | - [kedromelon/mdlr](https://github.com/kedromelon/mdlr) - like above, but more for sound generation (oscillators, tones, waveforms, synths) 292 | - [react-midi-device-provider](https://github.com/halvves/react-midi-device-provider) - simple MIDI device/messages handler for react 293 | - [TReactor](https://github.com/kevin-chau/TReactr) - a Traktor clone, written in React 294 | - [midi-sounds-react](https://www.npmjs.com/package/midi-sounds-react) - 1500 instruments 295 | 296 | ### Visual waveform generators 297 | 298 | - [bbc/peaks.js](https://github.com/bbc/peaks.js) - UI component for interacting with waveforms 299 | - [katspaugh/wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - generate navigable waveforms 300 | - [audio-to-svg-waveform](https://github.com/invokemedia/audio-to-svg-waveform) - simple, generates SVGs, nothing else 301 | - [patidar-suresh/audio-waveform](https://github.com/patidar-suresh/audio-waveform) - uses HTML5 Canvas and requestAnimationFrame 302 | - [WFPlayer](https://github.com/zhw2590582/WFPlayer) - an audio waveform generator, nice features 303 | - [audio-oscilloscope](https://github.com/mathiasvr/audio-oscilloscope) - waveform vizualiser for HTML5 Canvas 304 | - [waveplayer.js](https://github.com/michaeldzjap/waveplayer.js) - mp3 player that produces wavforms 305 | - [chrisweb/waveform-visualizer](https://github.com/chrisweb/waveform-visualizer) - waveform generator 306 | 307 | ### Node editors 308 | 309 | Also known as "graph editors". 310 | 311 | Link your sounds, effects, inputs & outputs together with a drag and drop interface: 312 | 313 | - [cwilso/WebAudio](https://github.com/cwilso/WebAudio) - awesome, easy-to-use node editor, with [demo](https://webaudioplayground.appspot.com) 314 | - [tai2/webaudiocomposer](https://github.com/tai2/webaudiocomposer) - audio node-editor with a patch-based UI, like Quartz composer 315 | - [dataflow-webaudio](https://github.com/forresto/dataflow-webaudio) - Dataflow graph editor + Web Audio API - [demo](https://forresto.github.io/dataflow-webaudio/) 316 | 317 | ### Audio visualization 318 | 319 | - [vudio.js](https://github.com/margox/vudio.js) - very nice bouncing bars, can place or align at top, bottom, left, right or center 320 | - [pts.js](https://ptsjs.org/) - a powerful creative coding and visualization library 321 | - [kelvinau/circular-audio-wave](https://github.com/kelvinau/circular-audio-wave) - circular audio waves powered by E-charts 322 | - [party-mode](https://github.com/preziotte/party-mode) - a d3 based visualizer with lots of options 323 | 324 | ### Other UI 325 | 326 | - [webaudio-controls](https://github.com/g200kg/webaudio-controls) - web components aimed at VST instruments, DAWs, etc 327 | - [abcjs](https://github.com/paulrosen/abcjs) - for rendering music notation 328 | - [williamfields/nofft.js](https://github.com/williamfields/nofft.js) - Javascript library for creating MIDI-responsive visuals 329 | - [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) 330 | - [ISNIT0/webaudio-generator](https://github.com/ISNIT0/webaudio-generator) - a UI for generating Web Audio API code 331 | 332 | 333 | --------------------------------------------------------------------------------