WAMs have two incarnations. A headless WebAssembly synth is distributed as a loader script file (e.g., obxd.js), and it implements the synth engine as an AudioWorkletNode – AudioWorkletProcessor pair. The second incarnation adds frontpanel GUI, reusing the headless synth engine implementation. GUI version is distributed as a Web Component (e.g., obxd.html), and loaded using HTML import.
I wrote recently also a <wam-host> container to simplify WAM embedding. <wam-host> A) handles synth loading and instantiation, B) provides common patch and midi port management, and C) exposes an on-screen keyboard. The following code snippet embeds a full obxd version in a webpage/webapp:
|
1 2 3 4 5 6 7 8 |
<script src="webcomponents-lite.js"></script> <link rel="import" href="https://webaudiomodules.org/wam-host.html"> ... wamhost.context = new AudioContext(); wamhost.load("https://webaudiomodules.org/synths/obxd.html").then( wam => wam.connect( wam.context.destination )); ... <wam-host id="wamhost"></wam-host> |
The first line is not required in Chrome, but for cross-browser support the script may be included for example from CDN. Although embedding is pretty straight forward using the code snippet above, my next step is to streamline lines 4..8 into a declarative one-liner
|
1 |
<wam-host src="https://webaudiomodules.org/synths/obxd.html" autoconnect></wam-host> |
so instead of showing a static image of a synth plugin, a web page can embed its fully interactive WAM implementation with a single line of code. The amount of downloaded data will most probably be larger though. In a future blog post I will analyze payload sizes for existing WAMs which, by the way, are embedded using code from the first snippet.