Articles and videos

Music theory

• Let's learn about waveforms - really nice interactives to teach waveforms by Pudding.cool source code
• The Physics of Music
• JS Dynamic Audio Synth Tutorial - make a synth piano keyboard from scratch, covers lots of theory
• Principles of Sound Synthesis - or, why synths can't do guitars
• Drum patterns and exercises - master thesis by Ethan Hein, with nice circle system
• Video: Play With Your Rhythm - Drum Patterns - nice explanation of various drums patterns
• Video: Play With Your Rhythm - Build a beat - follow up to the above video
• Doc: Play With Your Rhythm - spreadsheet showing notations for all patterns
• solfej.io/scales - search any scales to hear it, and see how to play, and which chords are in the scale

Web Audio API

• MSDN: Basic concepts behind Web Audio API
• MSDN: Using the Web Audio API
• MSDN: Web Audio API
• MSDN: Web Audio, best practices
• HTML5 Rocks: Scheduling Web Audio with Precision
• MSDN: AudioNode - generic interface for representing audio (an audio source, filter, gain mixer, output, ...)
• MSDN: AudioBuffer - a short audio asset residing in memory, created from an audio file
• MSDN: AudioBufferSourceNode - for audio with stringent timing/accuracy requirements
• MSDN: OfflineAudioContext - for generating sounds to buffer, fast as possible, no need to playback
• MSDN: Controlling multiple parameters with constantSourceNode
• MSDN: Creating a simple synth
• MSDN: Visualizations with Web Audio API
• Visualizations with Audio API and D3 - tutorial on music visualisation with D3, demo
• Visualising Sound with D3 - covers and demos various different visualisations
• Visualising Sound with D3 - covers and demos various different visualisations
• HTML5 Rocks: Scheduling Web Audio with Precision
• HTML5 Rocks: Developing Game Audio with the Web Audio API - mixing, fixing clipping, 3d sound, ..
• Music frequency visualizer with D3 - nice short guide, with repo and demo

Web MIDI API

• Web MIDI Examples - nice, short example code snippets
• CSS Tricks: Dip your toes into hardware with Web MIDI - covers anatomy of a MIDI signal, MIDI notes
• Keith McMillen: Making Music in the Browser with Web MIDI API
• Smashing Magazine: Web MIDI API
• Playing MIDI in JavaScript - lots of good examples and code samples

Books

Web MIDI API

• Web Audio API - for JS developers, game devs, etc. Written by Boris Smus.
• Programming Electronic Music in Pure Data (PD)
• Programming Electronic Music in Pure Data (PD)

Complete DAWs

Multi-instruments

• audionodes - very user-friendly, node editor based DAW (not open source)
• audiotool - requires sign up. Lots of tools and features, also available as a Chrome extension
• soundation - requires sign up. Sleek looking DAW, looks similar to Non-DAW
• gridsound - a lovely open source DAW, uses Web Audio API
• XinDaw - a multiscreen Web-based DAW designed for audio&video live performances (Tone.js/React/Meteor)
• zrythm - requires isgn up. A highly automated and intuitive DAW

Developer tools

Web MIDI API

• Pure Data - develop your own synths and patches
• google/audion - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes
• google/audion - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes

Libraries: Web Audio API

Web MIDI API

• howler.js - cross-browser audio library, 7kb, with multi-track, caching, falls back to HTML5 audio
• webaudio-peaks - small library to get peaks from audio
• kittykatattack/sound.js - micro library to load, generate and play sounds
• notthetup/smoothfade - smooth fade between AudioNodes
• scriptify/sountility - includes many small packages for adding, mixing, toggling effects on AudioNodes

Libraries: Web MIDI API

Web MIDI API

• cwilso/WebMIDIAPIShim - popular polyfill, used by Jazzsoft, among others. Test it here
• jazz-soft/WebMIDIAPIShim - MIDI polyfill for navigator in older browsers and Node
• mudcube/MIDI.js - can play midi files using the given soundFonts
• jazz-soft/JZZ - MIDI library for Node and Browsers
• jazz-soft/web-midi - WebMIDI API for browsers only
• jazz-midi-electron - WebMIDI API for Electron
• igorski/zMIDI - small MIDI library, an easy interface to working with Web MIDI
• colxi/MidiParser - a binary MIDI file reader for browser/Node, converts a MIDI binary file to a JSON object
• grimmdude/MidiWriterJS - an API for programmatically generating multi-track MIDI files and JSON objects
• grimmdude/MidiPlayerJS - multi-track MIDI player/parser
• hoch/spiral - lightweight WebAudio/WebMIDI library
• dingram/jsmidgen - generate MIDI files from javascript
• node-easymidi - a wrapper around node-midi to make things easier
• webmidi - control MIDI instruments/messages with ease
• Midi-Connector - for connecting your MIDI device to aconnect (one of the ALSA tools)
• tween-midi-editor - MIDI tween editor
• AndrejHronco/midi-ports - small library to manage attached MIDI ports and devices
• jazz-soft/JZZ-midi-Gear - get info about your MIDI device

MIDI instruments

Drum pads / MPC / MPD

• completejavascript/drum-machine - simple react based MPD
• dusanpopov/Drum-machine - an AKAI-like MPC
• Introduction-to-Programming-Term-1-Project - USB MIDI drum pad and keyboard, uses p5, ZMIDI
• webmaeistro/drum-machine - nice, simple one, no lag, works well
• electric-drums-pwa - simple, buttons at bottom, good performance
• dburles/ssu16 - very slick Akai-like MPC, with step sequencing, sample import, much more
• cwilso/MIDIDrums - MIDI version of Shiny Drum Machine
• electric-drums-pwa - simple, buttons at bottom, good performance

Guitar

• 1j01/guitar - drag over the strings to play
• ronkot/ks-guitar - play chords with keyboard keys, and strum with up/down keys
• vitaliy-bobrov/js-rocks - lots of nice electric guitar effects, amps and cabinets

Multi-instruments

• terrible-techno - nice UI
• midi-sounds-react - nice examples of using soundfonts, includes a simple music sequencer
• WebMIDICon - nice collection of online instruments

Piano

• midi-with-node - a web based GUI & NodeJS backend that can register as a MIDI device in your DAW
• TomerAberbach/piano - very nice sounding piano, simple UI
• qwerty-hancock - simple JS piano component for larger projects, see qwerty hancock
• tri-chromatic-keyboard - nice, easy way to play piano for those who can't play piano (different key layout)
• Wscats/piano - nice piano, decent sounds, can make it play for you
• iBundin/Open-Web-Piano - nice piano, user-friendly: supports choosing a MIDI device on load
• noodle-doodle - a nice piano roll, demo here
• WarpPrism/AutoPiano - feature-packed, large piano

Sequencers & Trackers

• efflux-tracker - browser based music tracker (here) driving a modular synth environment with MIDI support
• web-drum-sequencer - A drum machine and sequencer built with the Web Audio API, React, and Redux
• da-beat-sequencer - lightweight MIDI and audio sequencer
• drum-sequencer - lightweight sequencer, simple UI
• drum-machine - simple sequencer, based on React
• hatsumatsu/108 - a slick, minimalist circular beat sequencer
• tinysynth - a nice little sequencer, easy to use, nice UI, generate random tracks
• nicolas-van/sonant-x-live - piano keyboard, filters, synth, sequencer, uses sonant-x
• andrefcasimiro/midikrew - full fledged music sequencer, built with React
• SpessaSynth - MIDI player with tracker, loads of settings
• drum-machine - simple sequencer, based on React

Synths

• d3-synth - synth sounds, with circular tracker UI. Very nice, clean code
• jssynth - powerful synth and sequencer
• sf2synth.js - a WebMidiLink based synthesizer with SoundFont support
• okaybenji/submono - small mono-voice (monophonic) synth, define sounds as JS objects
• okaybenji/subpoly - small multi-voice (polyphonic) synth, define sounds as JS objects
• nicolas-van/sonant-x - lightweight synth library
• ronkot/ks-guitar-synth - guitair synth, using Karplus-Strong algorithm. See ks-guitar for UI.
• webaudio-tinysynth - webaudio-tinysynth is a small synthesizer written in JavaScript with GM like timbre map
• diversen/pluggable-synth - small synth, lightweight piano UI, supports MIDI or keyboard
• Tinusw/webAudioSynth - has 2 oscillators with XY pads, and a piano keyboard
• hundredrabbits/Marabu - powerful synth, with GUI
• errozero/poly-synth - fully-fledged synth, with GUI, presets, etc
• ZulfadhliM/web-synth - basic synth with LFO modulation and XY pad, React-based
• stevengoldberg/juno106 - a Roland Juno 106 synth
• kevin-chau/minimoog.js - a Minimoog synth
• francoisgeorgy/BS2-Web - a very polished web interface for the BassStation II synth

Music theory

Web MIDI API

• funklet - learn famous drum beats using an interactive sequencer
• harmonizer - interactive piano that teaches harmony and rhythm theory
• play-along - learn the drums using a sequencer-like UI
• Keystack - A web-based circular visualizer for keyboards (circle of fifths).
• scribbletune/johann - Generate chord & scale charts to practice - for guitar, piano and PC keyboard (repo)
• funklet - learn famous drum beats using an interactive sequencer

Sound assets

SoundFonts

• midi-js-soundfonts - pre-rendered, MIDI soundfonts for use with MIDI.js
• ryanwhite04/soundfonts - includes lots of instruments, in mp3 and ogg
• surikov/webaudiofont - use full GM set of musical instruments to play MIDI and single sounds or effects
• soundfont-player - nice little library for loading and playing sound fonts
• danigb/sampler.js - simple sampler, defines instruments as JSON, with base64 mp3s in them
• sccherry/soundfont - soundfont piano player, uses 'FluidR3_GM', 'MusyngKite', 'FatBoy' (demo)
• letoribo/percussion-soundfonts - soundfonts for JZZ.synth.MIDI.js
• timbre_soundfonts.js - soundfonts for timbre.js
• PatrickWolleb/SoundFontJS - Node JS CLI for creating MIDI.JS ready sound fonts
• colinbdclark/sf2-parser - a SoundFont 2 parser, extracted from sf2synth.js
• montyanderson/soundfont-parser - soundfont parser that gets the detais/contents of .sfz files
• midijssf-from-sf2-pmb - utilities for converting soundfonts to MIDI.js format
• skratchdot/soundfont2mp3 - a command line tool for extracting single note mp3s from soundfont files

Sound creation

Instrument recordings

• scribbletune - generate chord progressions, scales, beats, save as MIDI clips, with a teacher app and sampler
• Tone.js - A Web Audio framework for making interactive music in the browser
• tonejs-instruments - instrument presets for Tone.js
• teoria - create notes, chords, scales, intervals.. get notes form intervals, and more..
• octavian - utilities for reasoning about musical notes, frequencies, and intervals
• Flocking - declaratively create sounds, synths, effects, etc, as JSON objects, supports mouse/trackpad
• btwael/zazate.js - make notes, tones, scales, chords, harmonies.. loads of functions
• midiflip - transpose, flip, reverse notes, etc
• note-parser - Given a string, obtain a hash with note properties (including midi number and frequency)
• simpleTones - create tones of a specfic note - add sawtooth, sine, triangle, etc, to modify
• beep.js - a JavaScript toolkit for building browser-based synthesizers

Low frequency oscillators ("LFOs"):

• TheTeapot418/LFO.js - a simple LFO in JavaScript, includes presets: sine, triangle, square, sawtooth, noise
• 2xAA/LFO.js - a fork of the above
• mohayonao/wave-tables - JSON files defining various sounds/instruments as wave tables
• diversen/wave-table-oscillators - wrappers around the wave tables above (allows you to use them)
• audiojs/audio-oscillator - Generate periodic oscillation into an array/audiobuffer using a simple API
• scijs/periodic-function - oscillator modifiers (sawtooth, square, sine, pulse, step, interpolate, etc) as JS functions, normalized 0..1

Pure Data (PD) patches

• sebpiq/WebPd - use your Pure Data patches in Javascript

Sound editing

ADSR envelopes

• audio-contour - A 5 stage audio envelope generator.. nice UI to edit WAV forms
• adsr-envelope - attack, delay, sustain, release and MORE, lots of options
• envelope-generator - nice and complete, lots of options
• adsr - attack, delay, sustain, release envelopes

Sound effects/processing

• alemangui/pizzicato - excellent sound shaping effects, nice demos showing guitar sounds
• wad - advanced processing/manipulating of sound files
• tuna - an audio effects library for the Web Audio API
• scriptify/Chnl - makes it easy to attach lots of effects to a single AudioNode of any kind

Sound equalizers

• GraphicalFilterEditor - very powerful sound shaping :)
• eAudio - the "Extended HTML Audio Object" - adds an equalizier

Sound samplers:

• hya-wave - nice online WAV editor
• waveform-playlist - very nice multi-track WAV editor, similar to Audacity :)

Vocoders

• cwilso/vocoder - a 28-band vocoder - a "robotic voice" processor

UI components and libraries

Audio visualization

• pts.js - a powerful creative coding and visualization library
• vudio.js - very nice bouncing bars, can place or align at top, bottom, left, right or center
• kelvinau/circular-audio-wave - circular audio waves powered by E-charts
• party-mode - a d3 based visualizer with lots of options

Node editors

• cwilso/WebAudio - awesome, easy-to-use node editor, with demo
• tai2/webaudiocomposer - audio node-editor with a patch-based UI, like Quartz composer
• dataflow-webaudio - Dataflow graph editor + Web Audio API - demo
• g200kg/WebAudioDesigner - nice node based sound designer demo

Other UI

• webaudio-controls - web components aimed at VST instruments, DAWs, etc
• abcjs - for rendering music notation
• williamfields/nofft.js - Javascript library for creating MIDI-responsive visuals
• nexus-js/ui - very nice UI toolkit for web based MIDI instrument UI components (used by nofft, above)
• ISNIT0/webaudio-generator - a UI for generating Web Audio API code
• g200kg/input-knobs - turns <input> tags into sliders, knobs, etc

React components

• react-music - define sounds, effects, etc, using JSX
• midi-sounds-react - 1500 instruments
• TReactor - a Traktor clone, written in React
• kedromelon/mdlr - like above, but more for sound generation (oscillators, tones, waveforms, synths)
• react-midi-device-provider - simple MIDI device/messages handler for react
• r-audio - WebAudio API using JSX
• kedromelon/mdlr - like above, but more for sound generation (oscillators, tones, waveforms, synths)

Visual waveform generators

• bbc/peaks.js - UI component for interacting with waveforms
• katspaugh/wavesurfer.js - generate navigable waveforms
• audio-to-svg-waveform - simple, generates SVGs, nothing else
• patidar-suresh/audio-waveform - uses HTML5 Canvas and requestAnimationFrame
• WFPlayer - an audio waveform generator, nice features
• audio-oscilloscope - waveform vizualiser for HTML5 Canvas
• chrisweb/waveform-visualizer - waveform generator