Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-javascript-audio

JavaScript tools, libraries and components for creating/managing audio, sounds and music
https://github.com/sc0ttj/awesome-javascript-audio

Last synced: 3 days ago
JSON representation

Articles and videos
- Music theory
  - Let's learn about waveforms - really nice interactives to teach waveforms by Pudding.cool [source code](https://github.com/joshwcomeau/waveforms)
  - The Physics of Music
  - JS Dynamic Audio Synth Tutorial - make a [synth piano keyboard](https://mrcoles.com/piano/) 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](https://wpferg.uk/MusicVisualisation/)
  - Music frequency visualizer with D3 - nice short guide, with [repo](https://github.com/bignerdranch/music-frequency-d3) and [demo](https://bignerdranch.github.io/music-frequency-d3/)
  - Visualising Sound with D3 - covers and demos various different visualisations
- 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
Books
- Web MIDI API
  - Web Audio API - for JS developers, game devs, etc. Written by Boris Smus.
  - Programming Electronic Music in Pure Data (PD)
Developer tools
- Web MIDI API
  - 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
  - google/audion - adds a new tab to Chrome DevTools with a node editor to view your AudioNodes
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](https://github.com/scribbletune/johann))
Sound creation
- Instrument recordings
  - scribbletune - 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)
  - 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](https://puredata.info/) [patches](https://puredata.info/community/member-downloads/patches) in Javascript
Sound editing
- Sound samplers:
  - hya-wave - nice online WAV editor
  - waveform-playlist - very nice multi-track WAV editor, similar to Audacity :)
- 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](https://alemangui.github.io/pizzicato/) 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
- Vocoders
  - cwilso/vocoder - a 28-band vocoder - a "robotic voice" processor
MIDI instruments
- 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](http://en.wikipedia.org/wiki/Karplus%E2%80%93Strong_string_synthesis) algorithm. See [ks-guitar](https://github.com/ronkot/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
- 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
- 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
- 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
- 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](https://stuartmemo.com/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](https://pomax.github.io/noodle-doodle/)
- Sequencers & Trackers
  - efflux-tracker - browser based music tracker ([here](https://www.igorski.nl/application/efflux/)) 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](https://github.com/nicolas-van/sonant-x)
  - andrefcasimiro/midikrew - full fledged music sequencer, built with React
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
UI components and libraries
- React components
  - react-music - define sounds, effects, etc, using JSX
  - midi-sounds-react - 1500 instruments
  - react-midi-device-provider - simple MIDI device/messages handler for react
  - TReactor - a Traktor clone, written in React
  - kedromelon/mdlr - like above, but more for sound generation (oscillators, tones, waveforms, synths)
- 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
- 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
- Node editors
  - cwilso/WebAudio - awesome, easy-to-use node editor, with [demo](https://webaudioplayground.appspot.com)
  - tai2/webaudiocomposer - audio node-editor with a patch-based UI, like Quartz composer
  - dataflow-webaudio - Dataflow graph editor + Web Audio API - [demo](https://forresto.github.io/dataflow-webaudio/)
- 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](https://nexus-js.github.io/ui/) (used by nofft, above)
  - ISNIT0/webaudio-generator - a UI for generating Web Audio API code
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](https://cwilso.github.io/WebMIDIAPIShim/)
  - 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](https://github.com/justinlatimer/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
Sound assets
- SoundFonts
  - ryanwhite04/soundfonts - includes [lots of instruments](https://ryanwhite04.github.io/soundfonts/), 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](https://stevecherry.net/soundfont/#index))
  - letoribo/percussion-soundfonts - soundfonts for JZZ.synth.MIDI.js
  - timbre_soundfonts.js - soundfonts for [timbre.js](https://github.com/mohayonao/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](https://github.com/gree/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
  - midi-js-soundfonts - pre-rendered, MIDI soundfonts for use with MIDI.js

Programming Languages

JavaScript 117 TypeScript 11 HTML 3 C 1 Shell 1

Ecosyste.ms: Awesome

awesome-javascript-audio

Articles and videos

Music theory

Web Audio API

Web MIDI API

Books

Web MIDI API

Developer tools

Web MIDI API

Music theory

Web MIDI API

Sound creation

Instrument recordings

Low frequency oscillators ("LFOs"):

Pure Data (PD) patches

Sound editing

Sound samplers:

ADSR envelopes

Sound effects/processing

Sound equalizers

Vocoders

MIDI instruments

Synths

Multi-instruments

Drum pads / MPC / MPD

Guitar

Piano

Sequencers & Trackers

Complete DAWs

Multi-instruments

UI components and libraries

React components

Audio visualization

Visual waveform generators

Node editors

Other UI

Libraries: Web Audio API

Web MIDI API

Libraries: Web MIDI API

Web MIDI API

Sound assets

SoundFonts