I am trying to use tone.js on ESM modules. (I could use it without problems in “commonjs” with a bundler)
In the html I have
<script src="tests.js" type="module"></script>
and tests.js:
import * as Tone from "./Tone.js"
gives -> Tone.Gain is not a constructor
If I try:
import * as Tone from "./node_modules/tone/build/esm/index.js";
then Chrome shows status 404 Global not found, and the same for classes, version, ToneAudioBuffer, AudioContext, ToneAudioBuffers andToneBufferSource
(Maybe I am wrong, just starting with ESM modules, but digging into that esm/index.js the imports are like import { ToneAudioBuffer } from "./core/context/ToneAudioBuffer"; (without .js extension, shouldn’t have any ESM module explicitly add the extension?)
I’ve lost track of other combinations I have tried without success and I can not find a working example of a such project. What would be the right way - if possible- to run Tone.js on js modules?
Without bundling, serving a HTML with a module script, try import "./node_modules/tone/build/esm/index.js";.
Or use a build of some kind, then use the recommended import import * as Tone from "tone";.
Optionally, use the CDN, with the plain global <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script> or the module syntax above.
<script type="module">
import "https://unpkg.com/tone@14.7.77/build/Tone.js";
const btn = document.querySelector("button");
btn.addEventListener("click", async () => {
await Tone.start();
const synth = new Tone.Synth().toDestination();
const now = Tone.now();
synth.triggerAttack("C4", now);
synth.triggerRelease(now + 50);
});
</script>
<button>Play</button>