353 lines
17 KiB
HTML
353 lines
17 KiB
HTML
<h1 id="awesome-webaudio">Awesome WebAudio</h1>
|
||
<p><a href="https://github.com/sindresorhus/awesome#readme"><img
|
||
src="https://awesome.re/badge.svg" alt="Awesome" /></a></p>
|
||
<p><img src="https://raw.githubusercontent.com/voodootikigod/logo.js/master/webaudio/webaudio-js.png" width="200px" alt="WebAudio"></p>
|
||
<blockquote>
|
||
<p>A curated list of awesome <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">WebAudio</a>
|
||
<a href="#packages">packages</a> and <a href="#demos">demos</a>.</p>
|
||
</blockquote>
|
||
<p>Inspired by the <a
|
||
href="https://github.com/sindresorhus/awesome">awesome</a> list
|
||
thing.</p>
|
||
<p>Please raise a <a
|
||
href="https://github.com/notthetup/awesome-webaudio/pulls">Pull-Request</a>
|
||
to add an awesome WebAudio thing to this list.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#packages">Packages</a>
|
||
<ul>
|
||
<li><a href="#frameworks">Frameworks</a></li>
|
||
<li><a href="#libraries">Libraries</a></li>
|
||
<li><a href="#utilities">Utilities</a></li>
|
||
<li><a href="#midi">MIDI</a></li>
|
||
<li><a href="#apps">Apps</a></li>
|
||
</ul></li>
|
||
<li><a href="#resources">Resources</a>
|
||
<ul>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#newsletters">Newsletters</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
</ul></li>
|
||
<li><a href="#obsolete">Obsolete</a></li>
|
||
</ul>
|
||
<h2 id="packages">Packages</h2>
|
||
<h3 id="frameworks">Frameworks</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/Tonejs/Tone.js">Tone.js</a> - A
|
||
framework for making interactive music in the browser.</li>
|
||
<li><a href="https://github.com/adamrenklint/bap">Bap</a> - A toolkit
|
||
for making beats and composing sequences, inspired by the classic
|
||
MPC60/2000.</li>
|
||
<li><a href="https://github.com/GoogleChrome/omnitone">Omnitone</a> -
|
||
Ambisonic spatial audio on the web.</li>
|
||
<li><a href="https://github.com/Mach1Studios/m1-sdk">Mach1Spatial</a> -
|
||
Vector based panning spatial audio on the web.</li>
|
||
<li><a href="https://www.elementary.audio/">Elementary</a>
|
||
– Declarative, functional framework for writing audio software on the
|
||
web or for native apps</li>
|
||
</ul>
|
||
<h3 id="libraries">Libraries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/notthetup/smoothfade">smoothfade</a> - A
|
||
library for smoothly fading between two AudioNodes.</li>
|
||
<li><a
|
||
href="https://github.com/benji6/virtual-audio-graph">virtual-audio-graph</a>
|
||
- Library for declaratively manipulating the Web Audio API.</li>
|
||
<li><a href="https://xsound.app/">XSound.js</a> - Full stack
|
||
library.</li>
|
||
<li><a href="https://github.com/kittykatattack/sound.js">Sound.js</a> -
|
||
A micro-library to load, play and generate sound effects and music for
|
||
games and interactive applications.</li>
|
||
<li><a href="https://github.com/meyda/meyda">Meyda</a> - Audio feature
|
||
extraction library including a variety of widely used audio
|
||
features.</li>
|
||
<li><a
|
||
href="https://github.com/katspaugh/wavesurfer.js">Wavesurfer.js</a> -
|
||
Interactive navigable audio visualization using Web Audio and
|
||
Canvas.</li>
|
||
<li><a href="https://github.com/audiojs/audio">Audiojs</a> - An object
|
||
that enables you to store, read, and write PCM audio data more
|
||
easily.</li>
|
||
<li><a href="https://github.com/Theodeus/tuna">Tuna</a> - An audio
|
||
effects library.</li>
|
||
<li><a href="https://okazari.github.io/Rythm.js/">Rythm.js</a> - A
|
||
javascript library that makes your page dance.</li>
|
||
<li><a href="https://github.com/goldfire/howler.js">Howler.js</a> - A
|
||
comprehensive library with a fallback to HTML5 Audio.</li>
|
||
<li><a href="https://github.com/kelvinau/circular-audio-wave">Circular
|
||
Audio Wave</a> - A JS library for audio visualization in circular wave
|
||
using Web Audio API and ECharts.</li>
|
||
<li><a href="https://github.com/rserota/wad">Wad</a> - Web Audio DAW.
|
||
Use the Web Audio API for dynamic sound synthesis. It’s like jQuery for
|
||
your ears.</li>
|
||
<li><a
|
||
href="https://p5js.org/reference/#/libraries/p5.sound">p5.sound</a> - An
|
||
extension that adds Web Audio functionality to the creative coding
|
||
library <a href="https://p5js.org/">p5.js</a>.</li>
|
||
<li><a
|
||
href="https://github.com/magenta/magenta-js/tree/master/music"><span
|
||
class="citation" data-cites="magenta/music">@magenta/music</span></a> -
|
||
A JavaScript library to use machine learning models and generate music
|
||
in the browser, by having some neat abstractions over the Webaudio
|
||
API.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/soundfont-player">soundfont-player</a>
|
||
- A soundfont loader/player to play MIDI sounds using WebAudio API.</li>
|
||
<li><a
|
||
href="https://github.com/cifkao/html-midi-player">html-midi-player</a> -
|
||
HTML elements for easy MIDI playback and visualization, without the need
|
||
to write any custom JS code, but scriptable and stylable as needed.</li>
|
||
<li><a href="https://github.com/infojunkie/musicxml-player">MusicXML
|
||
Player</a> - A TypeScript component that loads and plays MusicXML files
|
||
in the browser using Web Audio and Web MIDI.</li>
|
||
<li><a
|
||
href="https://github.com/jerosoler/waveform-path">waveform-path</a> -
|
||
Library to generate waveforms paths in svg.</li>
|
||
<li><a
|
||
href="https://github.com/jerosoler/wave-audio-path-player">wave-audio-path-player</a>
|
||
- Simple audio player webcomponent customizable with waveform.</li>
|
||
<li><a href="https://github.com/NumberOneBot/dsssp">dsssp</a> - React
|
||
component library for visualizing and managing audio filters with
|
||
drag-n-drop and transitions support.</li>
|
||
</ul>
|
||
<h3 id="utilities">Utilities</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/google/audion">Audion</a> - Chrome
|
||
extension that adds a Web Audio panel to Developer Tools.</li>
|
||
<li><a
|
||
href="https://github.com/ISNIT0/webaudio-generator">web-audio-generator</a>
|
||
- A UI for generating Web Audio code.</li>
|
||
</ul>
|
||
<h3 id="midi">MIDI</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/notthetup/midimessage">midimessage</a> -
|
||
A simple MIDI Message parser.</li>
|
||
<li><a href="https://github.com/jazz-soft/JZZ">JZZ</a> - MIDI library
|
||
for Node.js and all major browsers.</li>
|
||
<li><a
|
||
href="https://github.com/jazz-soft/JZZ-midi-Gear">JZZ-midi-Gear</a> -
|
||
Retrieve your MIDI device model and manufacturer.</li>
|
||
<li><a href="https://webmidijs.org/">WEBMIDI.js</a> - The Web MIDI API
|
||
made easy.</li>
|
||
</ul>
|
||
<h3 id="apps">Apps</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/steffest/BassoonTracker">BassoonTracker</a> -
|
||
MOD/XM Tracker in Javascript.</li>
|
||
<li><a href="https://github.com/mmckegg/loop-drop-app">LoopDrop App</a>
|
||
- MIDI looper, modular synth and sampler app built using Web Audio and
|
||
Web MIDI APIs.</li>
|
||
<li><a href="https://xsound.app/">X Sound</a> - Multi Sound Application
|
||
that uses XSound.js.</li>
|
||
<li><a href="https://github.com/surikov/molgav">Molgav</a> - Musical
|
||
Step Sequencer for melodies exchange.</li>
|
||
<li><a
|
||
href="https://github.com/andrevenancio/mod-synth.io">mod-synth.io</a> -
|
||
Create your own modular synthesizer, or emulate different synths.</li>
|
||
<li><a href="https://gridsound.github.io">GridSound</a> - A
|
||
work-in-progress DAW (Digital Audio Workstation).</li>
|
||
<li><a href="https://learningmusic.ableton.com/">Learning Music</a> -
|
||
Learn the basics of music making.</li>
|
||
<li><a href="https://github.com/lukehorvat/super-oscillator">Super
|
||
Oscillator</a> - An interactive, 3D music synthesizer for the Web.</li>
|
||
<li><a href="https://audionodes.com">AudioNodes</a> - Modular audio
|
||
production suite with multi-track audio mixing, audio effects, parameter
|
||
automation, MIDI editing, synthesis, cloud production, and more.</li>
|
||
<li><a
|
||
href="https://github.com/naomiaro/waveform-playlist">waveform-playlist</a>
|
||
- Multitrack Web Audio editor and player with canvas waveform preview.
|
||
Set cues, fades and shift multiple tracks in time. Record audio tracks
|
||
or provide audio annotations. Export your mix to AudioBuffer or WAV!
|
||
Project inspired by Audacity.</li>
|
||
<li><a href="https://github.com/scriptify/soundcycle">SoundCycle</a> - A
|
||
Web Audio based Loopstation for musicians with effects and different
|
||
looping modes.</li>
|
||
<li><a href="https://dsp.audio/editor/">DSP.audio Worklet Editor</a> -
|
||
Online Audio Worklet editor for sketching and collaboration, with
|
||
sampler, MIDI and analyzers. Like a JSFiddle, but for DSP.</li>
|
||
<li><a href="https://audiomass.co/">AudioMass</a> - free, open source,
|
||
web-based Audio and Waveform Editor.</li>
|
||
<li><a href="https://ide.csound.com/">Csound IDE</a> - web IDE for <a
|
||
href="https://en.wikipedia.org/wiki/Csound">CSound programming
|
||
language</a>.</li>
|
||
<li><a href="https://github.com/fletcherist/jamhub">jamhub</a> -
|
||
low-latency remote music collaboration & jam.</li>
|
||
<li><a href="https://github.com/cwilso/metronome">Web Audio
|
||
Metronome</a> - metronome app that uses the Web Audio scheduler and
|
||
setTimeout scheduler</li>
|
||
<li><a href="https://earsketch.gatech.edu/landing/#/">EarSketch</a> -
|
||
free educational programming environment to teach Python and Javascript
|
||
through music composing and remixing</li>
|
||
<li><a
|
||
href="https://github.com/g200kg/webaudio-tinysynth">webaudio-tinysynth</a>
|
||
- a small synthesizer written in JavaScript with GM like timbre
|
||
map.</li>
|
||
<li><a
|
||
href="https://github.com/meerasndr/sample-golang-app">web-audio-beat-detector</a>
|
||
- a beat detection utility which is using the Web Audio API</li>
|
||
<li><a
|
||
href="https://github.com/jamesfiltness/web-audio-mixer">web-audio-mixer</a>
|
||
- An audio mixer built using Web Audio.</li>
|
||
<li><a
|
||
href="https://github.com/MaxAlyokhin/audio-motion-interface">Audio-motion
|
||
interface</a> - A web synthesizer that generates sound using smartphone
|
||
gestures in the space.</li>
|
||
<li><a href="https://topos.raphaelforment.fr">Topos</a> - A Web based
|
||
live coding environment inspired by the Monome Teletype. Uses Web Audio
|
||
and MIDI.</li>
|
||
<li><a href="https://onlinesequencer.net">Online Sequencer</a> - A
|
||
simple and easy-to-use sequencer with plenty of functionality, based
|
||
around the Web Audio API.</li>
|
||
<li><a href="https://github.com/MaxAlyokhin/binary-synth">Binary
|
||
Synth</a> - A web-synthesizer that generates sound from the binary code
|
||
of any files.</li>
|
||
<li><a href="https://github.com/NumberOneBot/dsssp-demo">dsssp-demo</a>
|
||
- WebAudio music player with 7-bands EQ and filter presets.</li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<h3 id="tutorials">Tutorials</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/mmckegg/web-audio-school">WebAudio
|
||
School</a> - A series of self-guided workshops to learn WebAudio.</li>
|
||
<li><a href="https://web-audio-api.firebaseapp.com/">Web Audio API
|
||
Understandable Reference</a> - A reference that aims to be easy to
|
||
understand for those who know some JavaScript and basic audio
|
||
principles.</li>
|
||
<li><a
|
||
href="https://code.tutsplus.com/tutorials/the-web-audio-api-what-is-it--cms-23735">The
|
||
Web Audio API: What Is It?</a> - Intro to WebAudio.</li>
|
||
<li><a href="https://github.com/kylestetz/Web-Audio-Basics">Web Audio
|
||
Basics</a> - A growing set of light code samples with CodePen links for
|
||
each.</li>
|
||
<li><a href="https://padenot.github.io/web-audio-perf/">Web Audio
|
||
Perf</a> - Performance of various AudioNodes and strategies for
|
||
efficient resource usage (from WAC2016).</li>
|
||
<li><a href="https://github.com/irritant/WAC-2016-Tutorial">Percussion
|
||
Synthesis Using Web Audio</a> - This tutorial will introduce the basics
|
||
of web audio programming by writing code to synthesize simple percussion
|
||
sounds (from WAC2016).</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLLgJJsrdwhPywJe2TmMzYNKHdIZ3PASbr">Browser
|
||
Noise: Web Audio Tutorials</a> - Playlist of video tutorials by Dan
|
||
Tramte, hosted on the Audio Programmer YouTube channel.</li>
|
||
<li><a href="https://github.com/survivejs/audio-katas">audio-katas</a> -
|
||
A collection of self-guided katas during which you will build a DAW of
|
||
your own while getting exposed to the key Web Audio APIs.</li>
|
||
</ul>
|
||
<h3 id="books">Books</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.routledge.com/JavaScript-for-Sound-Artists-Learn-to-Code-with-the-Web-Audio-API/Turner-Leonard/p/book/9781138961531">JavaScript
|
||
for Sound Artists</a> - A bottom up JavaScript / DOM course using Web
|
||
Audio for all the examples.</li>
|
||
<li><a href="https://webaudioapi.com/book/">Web Audio API</a> - Intended
|
||
to be a springboard for web developers with little to no digital audio
|
||
expertise. Geared towards game audio and interactive apps.</li>
|
||
</ul>
|
||
<h3 id="newsletters">Newsletters</h3>
|
||
<ul>
|
||
<li><a href="https://www.webaudioweekly.com">Web Audio Weekly
|
||
Newsletter</a> - A weekly review of what’s happening in Web Audio.</li>
|
||
</ul>
|
||
<h3 id="community">Community</h3>
|
||
<ul>
|
||
<li><a href="https://web-audio-slackin.herokuapp.com/">Slack</a> - A
|
||
Slack for discussing Web Audio.</li>
|
||
<li><a href="https://webaudioconf.com/">Web Audio Conference</a> -
|
||
International conference dedicated to web audio technologies and
|
||
applications.</li>
|
||
</ul>
|
||
<h2 id="obsolete">Obsolete</h2>
|
||
<p>Projects without activity since January 2019 or officially dead.</p>
|
||
<ul>
|
||
<li><a href="https://github.com/gibber-cc/gibberish">Gibberish</a> - A
|
||
JavaScript DSP library that creates JIT optimized audio callbacks using
|
||
code generation techniques.</li>
|
||
<li><a href="https://github.com/kylestetz/lissajous">lissajous</a> - A
|
||
tool for programmatic audio performance.</li>
|
||
<li><a
|
||
href="https://github.com/surikov/SSSynthesiser.js">SSSynthesiser.js</a>
|
||
- A wavetable synthesizer for interactive music and sound effects.</li>
|
||
<li><a href="https://github.com/hoch/WAAX/">WAAX</a> - Build Music Apps
|
||
for browsers.</li>
|
||
<li><a href="https://github.com/meenie/band.js/">Band.js</a> An
|
||
interface for the Web Audio API that supports rhythms, multiple
|
||
instruments, repeating sections, and complex time signatures.</li>
|
||
<li><a href="https://github.com/adelespinasse/reverbGen">reverbGen</a> -
|
||
A JavaScript library for generating artificial reverb impulse
|
||
responses.</li>
|
||
<li><a href="https://github.com/abbernie/tune">TuneJS</a> - A tuning
|
||
library of microtonal and just intonation scales. Supports over 3,000
|
||
historical tunings.</li>
|
||
<li><a href="https://github.com/zya/beet.js">Beet.js</a> - A sequencer
|
||
library for creating euclidean rhythms and polyrhythms.</li>
|
||
<li><a href="https://github.com/kylestetz/AudioKeys">AudioKeys</a> - A
|
||
QWERTY keyboard for web audio projects.</li>
|
||
<li><a
|
||
href="https://github.com/mohayonao/web-audio-test-api">web-audio-test-api</a>
|
||
- A Web Audio test library for CI.</li>
|
||
<li><a
|
||
href="https://github.com/mrahtz/javascript-karplus-strong">javascript-karplus-strong</a>
|
||
- JavaScript/Web Audio implementation of Karplus-Strong guitar
|
||
synthesis.</li>
|
||
<li><a href="https://github.com/mohayonao/osc-msg">osc-msg</a> - OSC
|
||
message decoder/encoder with fault tolerance.</li>
|
||
<li><a href="https://github.com/alemangui/pizzicato">Pizzicato</a> - A
|
||
library that aims to simplify the creation and manipulation sounds in
|
||
the browser.</li>
|
||
<li><a href="https://github.com/mattlima/mooog">Mooog</a> - Tools that
|
||
simplify working with AudioNodes, inspired by jQuery and mixing
|
||
tables.</li>
|
||
<li><a
|
||
href="https://github.com/itsjoesullivan/envelope-generator">envelope-generator</a>
|
||
- Simple ADSR envelope generator for web audio.</li>
|
||
<li><a href="https://github.com/danigb/audio-contour">audio contour</a>
|
||
- A 5 stage audio envelope generator.</li>
|
||
<li><a
|
||
href="https://github.com/higuma/web-audio-recorder-js">web-audio-recorder-js</a>
|
||
- A library that records audio input (Web Audio API AudioNode object)
|
||
and encodes to audio file image (Blob object).</li>
|
||
<li><a href="https://github.com/oampo/Audiolet">audiolet</a> - A
|
||
JavaScript library for real-time audio synthesis and composition from
|
||
within the browser.</li>
|
||
<li><a href="https://github.com/createbits/playnote">playnote</a> - Play
|
||
your favorite instrument in the browser, with complex note intervals and
|
||
scales.</li>
|
||
<li><a href="https://github.com/mattdiamond/Recorderjs">Recorderjs</a> -
|
||
A plugin for recording/exporting the output of Web Audio API nodes.</li>
|
||
<li><a href="https://github.com/notthetup/resampler">resampler</a> - A
|
||
utility for resampling audio.</li>
|
||
<li><a
|
||
href="https://github.com/tornqvist/bpm-detective">bpm-detective</a> –
|
||
Detects the BPM of a song or audio sample.</li>
|
||
<li><a
|
||
href="https://github.com/mohayonao/web-audio-utils">web-audio-utils</a>
|
||
- Commonly needed utility functions for Web Audio API.</li>
|
||
<li><a
|
||
href="https://github.com/lukehorvat/web-audio-oscillators">web-audio-oscillators</a>
|
||
- A collection of Web Audio custom oscillators.</li>
|
||
<li><a href="https://github.com/AndrejHronco/midi-ports">midi-ports</a>
|
||
- handy library to make it easier to work with attached MIDI
|
||
devices.</li>
|
||
<li><a href="http://outputchannel.com/midi-logger/">Midi Logger</a> -
|
||
This Midi Logger will print all midi input to your browser for
|
||
debugging.</li>
|
||
<li><a href="https://github.com/jcppman/code-player">Code Player</a> -
|
||
An experimental app that makes your codes sing for you.</li>
|
||
<li><a href="https://www.webaudiomodules.org/">Web Audio Modules</a> -
|
||
synthesizers and audio effects processors for web browsers (both API and
|
||
implementations).</li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p>To the extent possible under law, <a
|
||
href="https://chinmay.audio/">Chinmay Pendharkar</a> has waived all
|
||
copyright and related or neighboring rights to this work.</p>
|
||
<p><a href="https://github.com/notthetup/awesome-webaudio">webaudio.md
|
||
Github</a></p>
|