rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
master
awesome-awesomeness/html/webaudio.html
rhetenor 5916c5c074 update lists
2025-07-18 22:22:32 +02:00

353 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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 &amp; 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>
Reference in New Issue View Git Blame Copy Permalink