Estoy tratando de usar tone.js en módulos ESM. (podría usarlo sin problemas en “commonjs” con un bundler)
en el html tengo
<script src="tests.js" type="module"></script>y pruebas.js:
import * as Tone from "./Tone.js" da -> Tone.Gain is not a constructor
Si intento:
import * as Tone from "./node_modules/tone/build/esm/index.js"; luego, Chrome muestra el estado 404 Global no encontrado, y lo mismo para las classes, version, ToneAudioBuffer, AudioContext, ToneAudioBuffers andToneBufferSource
(Tal vez me equivoque, solo comencé con los módulos ESM, pero profundizando en ese esm/index.js, las importaciones son como importar {ToneAudioBuffer} desde "./core/context/ToneAudioBuffer"; (sin la extensión .js, no debería tener ¿Algún módulo ESM agrega explícitamente la extensión?)
He perdido la pista de otras combinaciones que he probado sin éxito y no puedo encontrar un ejemplo funcional de un proyecto de este tipo. ¿Cuál sería la forma correcta, si es posible, de ejecutar Tone.js en módulos js?
Sin agrupar, sirviendo un HTML con un script de módulo, intente import "./node_modules/tone/build/esm/index.js"; .
O use una compilación de algún tipo, luego use la importación recomendada import * as Tone from "tone"; .
Opcionalmente, use la CDN, con el <script src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script> global simple o la sintaxis del módulo anterior.
<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>