wasgen VS webaudio-examples

Very neat, though I got prominent clicks and artifacts in both chrome and firefox.

If anyone's interested, some years ago I made a wrapper library for things like this, to wallpaper over the famously hairy WebAudio synthesis API. Basically you pass in a static object describing the audio graph and parameters you want, and the lib creates the WebAudio nodes and then cleans them up after the sound releases.

https://github.com/fenomas/wasgen

I work on this space a lot, and maintain a couple of libraries you might be interested in. They are very much focused on light quick "good enough" web audio music/sound effects.

https://github.com/fenomas/wasgen - a declarative abstraction layer around web audio oscillators and filters

https://fenomas.github.io/wafxr/ - a GUI front-end demo for the previous

You might try wasgen, which I maintain. Basically you pass it an object that describes your audio graph, and a frequency/duration/volume, and it creates/disposes all the audio nodes.

https://github.com/andyhall/wasgen

Making the sound program objects isn't trivial if you're unfamiliar with low-level audio, but the live demo has examples for all MIDI instruments: https://andyhall.github.io/wasgen/

In this article, we'll explore three essential terms in the Web Audio API for our project. For more in-depth information, visit MDN Docs.

Exhausted and having tried out various approaches without much success, I decided to give Web Audio API a try. While it appeared slightly harder to work with, I was frankly running out of options. All that said, moving from HTML5 Audio to Web Audio API involved quite a fair bit of changes and experimentation.

MDN Web Audio Doc

I found the wikipedia article [1] on the subject to be helpful to understand a little bit whats going on here.

I wonder if there's more performant wasm implementations that can interface with the WebAudio API [2]? Quick search brings up things like [3]

[1] https://en.wikipedia.org/wiki/Frequency_modulation_synthesis

[2] https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A...

[3] https://github.com/a-cordier/wasm-audio

Feel free to refer to the official documentation to learn more about the Web Audio API.

You can see details on how to implement this API in your application, including the interfaces that it extends, the necessary permissions, browser compatibility, and much more on its MDN page.

As part of my effort to remake my old Artsy demo in more modern JavaScript, I decided to start with the music player. The original Amiga demo from 1993 used the SoundTracker MOD format, but my remake from 2013 uses an MP3 file, which was a bit of a cheat. Playing an MP3 is efficient and requires almost zero code, but it's not very interesting. Also, it requires loading several megabytes of data. So I decided to try to make a MOD player from scratch, using only the Web Audio API

After taking a good look through the Web Audio API documentation, I decided that the best way for my synthesizer to output sound to the speakers was through the use of the AudioWorkletNode combined with an AudioWorkletProcessor. This combination of two nodes would allow me to generate audio in a background thread which could then be played through the speakers.

Let us take a look at various concepts behind Web Audio API.