Working With Browsers

Since spessasynth_lib is an npm package, you need to do two things to make it work with browsers:

1. Bundle the code
2. Copy the processor (if you are using the WorkletSynthesizer)

Copying the processor

Copy the spessasynth_processor.min.js from spessasynth_lib/dist/spessasynth_processor.min.js to the destination where the browsers can see it (for example, a public directory). Make sure that the path set in audioWorklet.addModule() works correctly in the minified file!

Automation

For example, you can make a basic script for building the project:

# Copy the worklet
cp node_modules/spessasynth_lib/dist/spessasynth_processor.min.js public/spessasynth_processor.min.js

# Your build script here
esbuild main.js --bundle --minify --sourcemap=linked --format=esm --platform=browser --outfile=main.min.js
Copy

Then in your package.json:

{
    "scripts": {
        "build": "./build.sh"
    }
}
Copy

This allows you to run npm run build to compile the project.

This is just an example, so make sure that your paths are correct.

Bundling the code

For that, you will need a bundler like webpack or esbuild. For simplicity, I recommend the latter.

npm install esbuild -D
Copy

Preparing the code

An example file (named main.js):

import { WorkletSynthesizer } from "spessasynth_lib";

console.log("yay, we have imported", WorkletSynthesizer);
Copy

Bundling and minification

esbuild main.js --bundle --minify --sourcemap=linked --format=esm --platform=browser --outfile=main.min.js
Copy

This will produce an output file called main.min.js and a main.min.js.map for debugging. Make sure to exclude the latter from production builds!

Linking to HTML

Link the minified file to your HTML script.

<script src="main.min.js" type="module"></script>
Copy

That's it! It will work after that. Make sure to run the esbuild command every time you make changes.