TypeError: h.ToneAudioBuffers is not a constructor

[floogy]

Fresh install (via PowerShell on Windows 10) results in the below upon visiting http://localhost:9876

JS Console displays a TypeError: h.ToneAudioBuffers is not a constructor, full message below:

Navigated to http://localhost:9876/
An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. Context.js:21
 * Tone.js v13.8.21 * Context.js:581
An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. 11 Signal.js:35
Uncaught (in promise) TypeError: h.ToneAudioBuffers is not a constructor
    N https://cdn.jsdelivr.net/npm/@magenta/music@^1.10.0/es6/core.js:1
    initialize https://cdn.jsdelivr.net/npm/@magenta/music@^1.10.0/es6/core.js:1
    promise callback*initialize https://cdn.jsdelivr.net/npm/@magenta/music@^1.10.0/es6/core.js:1
    loadSamples https://cdn.jsdelivr.net/npm/@magenta/music@^1.10.0/es6/core.js:1
    loadSamples https://cdn.jsdelivr.net/npm/@magenta/music@^1.10.0/es6/core.js:1
    AudioLoop http://localhost:9876/audio/audio-loop.js:43
    <anonymous> http://localhost:9876/script.js:36
core.js:1:163437

UX lets me navigate past Keyboard selection then appears stuck on "Loading soundfont files..." with the Record button disabled.

[squidKid-deluxe]

Same problem, Linux Mint 20, Firefox browser, npm version 9.2.0

I installed via the instructions, npm install then npm start, then on opening browser window, I got the same result as floogy.

Looking for reasons, I scrolled back in the terminal output, and when I ran npm install npm said:

found 16 vulnerabilities (4 low, 4 moderate, 6 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

I then ran npm audit fix:

npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future

> @tensorflow/[email protected] install /home/oracle/drumbot/node_modules/@tensorflow/tfjs-node
> node scripts/install.js

CPU-linux-2.6.0.tar.gz
* Downloading libtensorflow
[==============================] 11118484/bps 100% 0.0s
* Building TensorFlow Node.js bindings
npm WARN [email protected] No repository field.

+ @tensorflow/[email protected]
+ @tensorflow/[email protected]
added 2 packages, removed 4 packages and updated 9 packages in 26.957s

10 packages are looking for funding
  run `npm fund` for details

fixed 6 of 16 vulnerabilities in 295 scanned packages
  8 vulnerabilities required manual review and could not be updated
  1 package update for 2 vulnerabilities involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

Running npm start:

> [email protected] start /home/oracle/drumbot
> node server/app.js


============================
Hi there 👋. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C++, by running npm i @tensorflow/tfjs-node, or npm i @tensorflow/tfjs-node-gpu if you have CUDA. Then call require('@tensorflow/tfjs-node'); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
============================
%c MusicVAE  background:magenta; color:white Initialized model in 0.00224s
Your app is listening on port 9876

Since I do not have a GPU, I ran npm i @tensorflow/tfjs-node, which completed successfully, though it still recommends installing it, so I presume the install did not get picked up.

After all that, I still get the same result.

I also tried on the Brave browser, with the same result but with a "Breaking Change" error:

Web MIDI will ask a permission to use even if the sysex is not specified in the MIDIOptions.

AFFECTED RESOURCES:

 - script.js:337

I wonder about the "critical" vulnerabilities (found 10 vulnerabilities (1 low, 4 moderate, 3 high, 2 critical)), but I am not sure what to do about them.

Not really a great JS dev, so I can't really offer any insight.

Thanks,

Squid

[squidKid-deluxe]

Just now seeing the hosted version, it doesn't hang like the local version, but it never actually creates the drum pattern either, just says Generating drums.... Looking in the console, I see the following (different!) error:

Uncaught Error: Cannot start playback while `Tone.Transport` is in use.
    start core.js:1
    addMelody audio-loop.js:81
    onBarMark script.js:256
    start metronome.js:90
    invoke TransportEvent.ts:76
    invoke TransportRepeatEvent.ts:89
    invoke TransportEvent.ts:76
    _processTick Transport.ts:230
    forEachAtTime Timeline.ts:385
    _iterate Timeline.ts:286
    forEachAtTime Timeline.ts:384
    _processTick Transport.ts:230
    _loop Clock.ts:277
    forEachTickBetween TickSource.ts:312
    _loop Clock.ts:276
    emit Emitter.ts:99
core.js:1:168740

I don't really know if that is the issue, though.