JavaScript tools, libraries and components for creating/managing audio, sounds and music.
- Let's learn about waveforms - really nice interactives to teach waveforms by Pudding.cool source code
- The Physics of Music by Michigen Tech
- 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/chords - search any chord to hear it, and see how to play on various instruments
- solfej.io/scales - search any scales to hear it, and see how to play, and which chords are in the scale
- 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 (web audio performance)
- HTML5 Rocks: Developing Game Audio with the Web Audio API - mixing, fixing clipping, 3d sound, ..
- 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
- Drum Sounds in Web Audio - creating drums sounds using the Web Audio API
- MSDN: Visualizations with Web Audio API
- Visualizations with Audio API and D3 - tutorial on music visualisation with D3, demo
- Music frequency visualizer with D3 - nice short guide, with repo and demo
- Visualising Sound with D3 - covers and demos various different visualisations
- 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
- Web Audio API - for JS developers, game devs, etc. Written by Boris Smus.
- Programming Electronic Music in Pure Data (PD)
- 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
- cwilso/WebMIDIAPIShim - popular polyfill, used by Jazzsoft, among others. Test it here
- jazz-soft/WebMIDIAPIShim - MIDI polyfill for
navigatorin older browsers and Node
These can play MIDI files, and handle MIDI input/output messages from MIDI instruments, etc:
- mudcube/MIDI.js - can play midi files using the given soundFonts
- midi-js-soundfonts - pre-rendered, MIDI soundfonts for use with MIDI.js
- 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
These are tools for managing MIDI instruments (hardware instruments/devices):
- 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
- google/audion - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes
- Pure Data - develop your own synths and patches
Tutorials and teachers:
- 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).
- funklet - learn famous drum beats using an interactive sequencer
- scribbletune/johann - Generate chord & scale charts to practice - for guitar, piano and PC keyboard (repo)
Sounds that can be downloaded and used in your JS applications:
Instruments and sounds you can attach to MIDI notes (using the Web MIDI API):
- 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
- midi-js-soundfonts - pre-rendered, MIDI soundfonts for use with MIDI.js
- 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
High quality recordings of instruments, nicely organised into seprate files, in MP3, WAV or similar format.
- ?
Programmatically create notes, chords, intervals, effects, etc:
- 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
- scribbletune - generate chord progressions, scales, beats, save as MIDI clips, with a teacher app and sampler
- btwael/zazate.js - make notes, tones, scales, chords, harmonies.. loads of functions
- timbre.js - JavaScript library for objective sound programming (archived)
- 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
- Also see LFOs and Synths sections.
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.
- 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
- sebpiq/WebPd - use your Pure Data patches in Javascript
- 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
Samplers make it easy to import, chop up, and extract parts of an audio file (usually WAV or MP3).
- waveform-playlist - very nice multi-track WAV editor, similar to Audacity :)
- hya-wave - nice online WAV editor
Modify a sound with more/less attack, delay, sustain, release, etc.
- 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
- GraphicalFilterEditor - very powerful sound shaping :)
- eAudio - the "Extended HTML Audio Object" - adds an equalizier
For Editing and adding effects to vocals.
- cwilso/vocoder - a 28-band vocoder - a "robotic voice" processor
Frontends and UIs to load & your play your sounds.
- 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
- 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
- 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
- WarpPrism/AutoPiano - feature-packed, large piano
- iBundin/Open-Web-Piano - nice piano, user-friendly: supports choosing a MIDI device on load
- noodle-doodle - a nice piano roll, demo here
Use (often) grid-based, stepped/looping sequencer UIs to generate beats, riffs, bass-lines, loops and so on.
- 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
Generate and edit your own sounds, voices and sound effects.
- 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
- d3-synth - synth sounds, with circular tracker UI. Very nice, clean code
These are more complete - they have multiple instruments.
- midi-sounds-react - nice examples of using soundfonts, includes a simple music sequencer
- WebMIDICon - nice collection of online instruments
- terrible-techno - nice UI
A "DAW" is a digital audio workstation - an all-round music production app
- gridsound - a lovely open source DAW, uses Web Audio API
- audionodes - very user-friendly, node editor based DAW (not open source)
- TReactor - a Traktor clone, written in React
- 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
- 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
- react-music - define sounds, effects, etc, using JSX
- kedromelon/mdlr - like above, but more for sound generation (oscillators, tones, waveforms, synths)
- react-midi-device-provider - simple MIDI device/messages handler for react
- TReactor - a Traktor clone, written in React
- midi-sounds-react - 1500 instruments
- 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
- waveplayer.js - mp3 player that produces wavforms
- chrisweb/waveform-visualizer - waveform generator
Also known as "graph editors".
Link your sounds, effects, inputs & outputs together with a drag and drop interface:
- 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
- vudio.js - very nice bouncing bars, can place or align at top, bottom, left, right or center
- pts.js - a powerful creative coding and visualization library
- kelvinau/circular-audio-wave - circular audio waves powered by E-charts
- party-mode - a d3 based visualizer with lots of options
- 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