zya / beet.js

Polyrhythmic Sequencer library for Web Audio API.
http://zya.github.io/beet.js
MIT License
114 stars 17 forks source link

Error when creating a layer #15

Open davay42 opened 2 years ago

davay42 commented 2 years ago

I started experimenting with beet to create a non-euclidean rhythm generator. I'm using the npm version of it inside my vuejs project. And whenever I create a layer from a pattern (as the docs say) I get this error.

Uncaught (in promise) TypeError: can't convert undefined to object
    webworkify beet_js.js:4256
    Metro wa-metro.js:21
    Layer layer.js:10
    js beet_js.js:4549

My code:

import Beet from 'beet.js'

const context = new AudioContext();

const beet = new Beet({
  context: context,
  tempo: 120
});

let pattern = beet.pattern(3, 7);
let layer = beet.layer(pattern, (t) => console.log(t));
zya commented 2 years ago

@davay42 At first glance, it seems like an issue with web workers in the underlying scheduling library 'wa-metro'. My guess is that by installing via npm and including in vue, the worker file does not get included. Are you using something like webpack to bundle your application?

davay42 commented 2 years ago

Yeah, I'm using vitepress based on vitejs. https://vitejs.dev/

zya commented 2 years ago

I'm not familiar with those tools you mentioned..

My suggestion would be to try and setup webpack such that it contains the file located here '/node_modules/wa-metro/lib/worker.js/' in the correct location where that library can load it in.

I'm currently a bit busy I can not try it out myself. But might be able to give it a go if you wait some time.

zya commented 2 years ago

There potentially need to be some changes to this library to support webpack.

davay42 commented 2 years ago

Webback is like a thing of the past as it's way slower, than new build tools built around esbuild. Vite is a breakthrough in the js ecosystem. That is I couldn't make webpack work for many times and stayed fully client-side with my vue apps. But vite just does the job almost effortlessly and works right from the box. Nobody would ever get back to webpack after such an dev experience ))

I tried installing wa-metro as a separate package, but it doesn't change anything - the error is still there... I'm OK to wait. I also can make a small reproduction repo with vite for you to test against.

zya commented 2 years ago

The thing is that when wa-metro was build originally, it was built with browserify in mind. Now browserify is not that popular anymore, webpack is also going away. We don't want to make the library dependant on any bundling library. I need to change it such that it works with any bundling.

davay42 commented 2 years ago

Yeah, sure! Plain JS is enough here! vite and other more modern tools are based on native js import - export and don't need any kind of special treatment.