Importing webaudio controls using import - need to wrap in vue

[abulka]

@micbuffa This project looks intriguing to me as it seems to use modern ES module imports with the webaudio controls - could that be considered one of the purposes of this project? The webaudio official docs don't mention import usage.

I'm trying to wrap some webaudio controls in a vue component, so that it plays nice in vue. Should I perhaps be using this project instead of the original g200kg version?

P.S. Not sure if you know anything about vue, but whilst I was able to import the g200kg javascript file in a .vue file using

<template>
  <webaudio-knob ref="knobRef" src="../knobs/LittlePhatty.png" min="0" max="100"></webaudio-knob>
</template>

<script>
import "https://g200kg.github.io/webaudio-controls/webaudio-controls.js"
...

but this gave me

Failed to resolve component: webaudio-knob

Not sure switching to your project would actually help?

[micbuffa]

Hi, here you can find a very simple vueJS project with webaudiocontrols imported in the HelloWorld.vue component. The trick is to understand that in <webaudio-knob src="./LittlePhatty.png", . corresponds to the public folder. The VueJS compiler resolves . in <img src="./image.png" so you can have image.png under the src folder, but this does not work with custom elements from the webaudiocontrols lib. See this github project : https://github.com/micbuffa/vueJSWithWebAudioControls.git