Tone.js Not Working with Wix?

Question:
Is it possible to use Tone.js when designing a webpage with Wix?

Product:
I’m using Wix Velo to create a page on my website and trying to play sounds on the page using Tone.js

What are you trying to achieve:
I’m trying to play sounds with Tone.js. If it works my plan is to then program parts of an image to play different sounds when clicked on by the user.

What have you already tried:
I’ve imported Tone.js ver. 15.0.4 using Wix’s npm compatibility, and that has let me import * as Tone from ‘tone’. Tone.js is available, and I was able to log its context, but when I try to create an oscillator, or use an attacktrigger I’m told “error: param must be an AudioParam”. This happens even when I copy their ‘Hello Tone’ example verbatim and put it into $w.onReady.

Hi, @user5275 !!

I haven’t tried Tone.js yet, so I can’t say for certain at this point. However, one thing I can say is that not all npm packages work on Wix. :upside_down_face:
In Wix’s Velo (the current coding framework, which is set to be integrated into the SDK in the future), some npm packages can be used, but not all of them. This is because the Velo environment has certain restrictions that differ from a typical browser environment, which may prevent some functionalities from working.
That said, Wix also allows you to use HTML components (iframes) and custom elements. While Velo code cannot be used in these environments, standard HTML, CSS, and JavaScript will work, meaning most npm packages that run in the browser should function without issue.
If you are unable to use an npm package in Wix’s Velo, consider using one of these alternative methods. :wink:

@onemoretime Thanks for the advice! Using a custom element let me get Tone.js working. Felt like I was banging my head against a brick wall yesterday and your advice really saved my sanity.

1 Like