3

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?

tru7
  • 6,348
  • 5
  • 35
  • 59
  • 2
    "*I could use it without problems in “commonjs” with a bundler*" - what bundler are you using? Please post its configuration. Or are you trying to use ES modules without a bundler? – Bergi May 06 '22 at 16:55
  • @Bergi, yes I am trying to use ES modules without bundler, that's the reason I am trying – tru7 May 06 '22 at 17:10
  • Then you need to serve the modules under the paths that Chrome is loading them (which can be without an extension). A bundler would fix this, and the paths are usually *meant* to be adjusted by a bundler, the build might not be made with native browser module resolution in mind. – Bergi May 06 '22 at 17:18
  • I'm curious though why `import * as Tone from "./Tone.js"` doesn't cause a 404 error as well – Bergi May 06 '22 at 17:18
  • @Bergi Chrome loads ./Tone.js because that file -downloaded- is in the directory. The problem is with the (sub)modules included by this Tone.js file-module – tru7 May 06 '22 at 20:33
  • Likely similar problem as [Tone.start is not a function](https://stackoverflow.com/questions/71104606/tone-js-tone-start-is-not-a-function). Try `import "./node_modules/tone/build/esm/index.js";`, use the CDN, or (preferably) use a build of some kind, then the recommended import `import * as Tone from "tone";`. – ggorlen May 30 '22 at 03:21

1 Answers1

2

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>
jsejcksn
  • 27,667
  • 4
  • 38
  • 62
ggorlen
  • 44,755
  • 7
  • 76
  • 106