timdaub / wasm-synth

C++ in the browser? Webassembly? Sounds jarring? Indeed, it is! Synthesizer for the browser.

wasm-synth

A synthesizer built from scratch in C++ and made available on the web through WebAssembly.

Prerequisites

The following tools are required for spinning up a local instance of WASM SYNTH. Click on the links to view the installation manuals:

• emscripten (emcc version 1.39.0)
• rollupjs

Docs & Blog post

My previous goal with this project was to learn audio programming. I wrote about it in this blog post. Since until then, a cambrian explosion of webassembly-based browser languages have appeared, I'm currently trying to make WASM SYNTH work properly again.

Compatibility

Since it seems that many browsers-vendors are arbitrarily changing APIs these days, I'm gonna keep track of WASM SYNTHs compatability here.

Commit	Chrome	Firefox	Safari	Brave
c4379418bc1cfe116dbf6bc51e25a42fdaa9c6f3	✓ 81.0	✓ 76.0	✗ 13.0.4	✓ 1.8.86

How are we currently testing?

• npm run dev and open the displayed site in one of the above browsers
• Hit some notes on your keyboard or by pressing with the mouse
• Toggle some UI elements (e.g. toggle off an oscillator)

I know how to improve/automate testing!

That's great! Any feedback or help is welcome! Please get in touch!

Install

To install:

$ npm i

Run

Before running the below specified commands, you'll have to set emsdk's environment variable as is detailed on the above linked page.

For development:

$ npm run dev

To build:

$ npm run build

License

See License.

Third Party resources Licenses

• Caret from Freepik from Flaticon

wasm-synth's Issues

WASM SYNTH page doesn't display any help/introduction/guide/stats

Firefox seems to be broken

Tried with 72.0.2 (64-bit)
When trying to play a sound, page goes blank.

lovasoa/setup-emscripten GitHub Action was deprecated, GH Actions CI is failing

see: https://github.com/lovasoa/setup-emscripten. Author recommends now using https://github.com/mymindstorm/setup-emsdk

The harmonics of a particular wave cannot be finely configured

Emscripten module returns a Promise

Hey there, love this project and your blog post!

Tried setting it up, didn't change anything, and found that the Module() call on this line returns a Promise. Adding a promise chain made everything work.

The Promise seems to be the expected behavior considering the MODULARIZE=1 arg. Docs here: https://emscripten.org/docs/getting_started/FAQ.html#how-can-i-tell-when-the-page-is-fully-loaded-and-it-is-safe-to-call-compiled-functions

I'm curious how people are able to build by default?

TODOs

There's lots of things I'd like to do. Too many actually. So I'll have to prioritize:

Things that are missing to "release" WASM Synth

• Check cross-browser compatibility again!
• Finish technical blog post
  • Have someone check math section
  • Outlook
  • Conclusion
  • Resources
  • Appendix?
    • Wave forms, polyphony, envelope shaping?
• On first load, sometimes the audio worklet loads too slow, making the site crash?
• It doesn't work AT ALL on mobile
• Some cross-linking blog post <=> synth <=> repo
• Include Web Audio meetup talk video if possible
• Add "minutes read" plugin to hexo
• Create table of contents at beginning of post
• Newsletter subscription option!

Things that I want to do in the future

• Copy copy:worklets whole worklet folder instead of just synth.js
• Set production = true in GitHub Action builds
• Corners still not equally long. Fix.
• When centering react-envelope-graph, it seems xr doesn't work anymore
• box-shadow and current logo take lots of resources. Maybe we can do smth about it
• Check if gain is still super low (set to a constant). If not, think about fixing it somehow
• When changing release, make sure that envelope parameters are not selected
• Use friend class less
• Implement cross-browser compatibility using audioworklet-polyfill
• Mixing active voices is not working well at the moment. Come up with a better solution
• Get rid of this-> in classes
• On other machines, sounds are not properly rendered (we had a tester with a sample rate of 44100)
• Not mobile ready...
• Create a constants file
• When changing release while playing sounds, some ugly artifacts appear
• When building, change the name of the output file to a hash such that github stops cashing the file
• When having a long release, the voice becomes quiet very quickly and then stays for a while...
• Not sure if continous saw waves are calculated correctly...
• Fix inline TODOs
• Extract C++ as own library
• Buy a bela.io and build my own hardware synth!
• Make a really cool mobile app with e.g. react native and put it in an app store
• Allow users to save presets

Crash on Chrome at first intraction

Disabling the cache (or opening for the first time) + rapidly clicking on the keyboard will have everything crash with the following traces on the console: (see bottom)

Cool project/blog post though.

Carlo

main.js:320 Using default labels. Set labels explicitly via 'labels' in the options parameter
iS.parseArray_ @ main.js:320
iS.start_ @ main.js:320
iS.init @ main.js:320
iS @ main.js:320
draw @ main.js:320
componentDidMount @ main.js:320
Yy @ main.js:7
t.unstable_runWithPriority @ main.js:7
tp @ main.js:7
jy @ main.js:7
ky @ main.js:7
xy @ main.js:7
cm @ main.js:7
(anonymous) @ main.js:7
Ty @ main.js:7
vm @ main.js:7
render @ main.js:7
(anonymous) @ main.js:320
main.js:7 TypeError: Cannot read property 'port' of null
at pS.onNoteOff (main.js:320)
at main.js:13
at Array.forEach ()
at t.handleNoteChanges (main.js:13)
at t.value (main.js:13)
at Yy (main.js:7)
at t.unstable_runWithPriority (main.js:7)
at tp (main.js:7)
at jy (main.js:7)
at ky (main.js:7)
xv @ main.js:7
Rv.n.callback @ main.js:7
Op @ main.js:7
Tp @ main.js:7
Yy @ main.js:7
t.unstable_runWithPriority @ main.js:7
tp @ main.js:7
jy @ main.js:7
ky @ main.js:7
(anonymous) @ main.js:7
t.unstable_runWithPriority @ main.js:7
tp @ main.js:7
op @ main.js:7
ip @ main.js:7
pu @ main.js:7
Rf @ main.js:7
main.js:320 Uncaught TypeError: Cannot read property 'port' of null
at pS.onNoteOff (main.js:320)
at main.js:13
at Array.forEach ()
at t.handleNoteChanges (main.js:13)
at t.value (main.js:13)
at Yy (main.js:7)
at t.unstable_runWithPriority (main.js:7)
at tp (main.js:7)
at jy (main.js:7)
at ky (main.js:7)
onNoteOff @ main.js:320
(anonymous) @ main.js:13
(anonymous) @ main.js:13
value @ main.js:13
Yy @ main.js:7
t.unstable_runWithPriority @ main.js:7
tp @ main.js:7
jy @ main.js:7
ky @ main.js:7
(anonymous) @ main.js:7
t.unstable_runWithPriority @ main.js:7
tp @ main.js:7
op @ main.js:7
ip @ main.js:7
pu @ main.js:7
Rf @ main.js:7
synth.js:17 Worklet launched successfully

Attack cannot be adjusted for an exponentially growing curve

Problem: timdaub.github.io/wasm-synth is not indicating which version is deployed

I use GitHub Actions to deploy wasm-synth automatically for every newly pushed commit on the master branch.

But for other collaborators, it's currently quite tricky to judge which version is online on timdaub.github.io/wasm-synth

There's multiple potential solutions to this problem:

• We could use a git post-commit hook to append the version number into a source code file and then always somehow link to the latest commit on GitHub
• We could simply start hosting WASM SYNTH on e.g. IPFS with e.g. https://fleek.co/

Add support for Ableton Link

https://github.com/Ableton/link

In some browsers, addons can create UDP sockets. There's some resources that have reversed the link protocol, so it shouldn't be too difficult to add a "Link" button to WASM synth: https://github.com/westhom/AbletonLinkProtocol

Another option could trying to include the link library directly in WASM somehow. But that'd only work for environments where UDP sockets are natively supported (not browsers)

Firefox: Configuring for SQ64 on all four oscis sound becomes "distorted?"

using headphones, only left ear has sound

In the AudioWorklet, we only fill one channel with the audio data. Hence it could be that with headphones only one channel is feed with audio.