Add visual elements using NPM

[erikm3103]

Hi,

I’m playing around with the new NPM and I wanted to understand the best usecases for NPM vs creating custom components.

I am planning to implement the following which is a audio visualizer: UNPKG - wavesurfer

What I’m trying to understand better is in what case it’s better to use something like NPM or creating a custom component.

In the case it’s possible to use the NPM install, is someone able to help me with the steps? I seem to not be able to load wavesurfer visually in the editor.

[Broberto]

If I was you, I’d go with a custom component. This way you can also get emits (values emitted from your component) fairly easily.

[dorilama]

FYI that package has been deprecated, you probably are looking for the package named wavesurfer.js

[AJAW]

Ive use statechange’s script tag for this

Couldnt get the npm plugin to work with it…

  if(!window["scp-loading-1759dd71-f1fe-484b-9941-fe2ff11908a8"]) {
    window["scp-loading-1759dd71-f1fe-484b-9941-fe2ff11908a8"] = true;
    let doc;
    /* Adding script from https://unpkg.com/wavesurfer.js@7 */
    doc = document.createElement('script');
    doc.src = 'https://unpkg.com/wavesurfer.js@7';
    document.body.appendChild(doc);
  }

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})

make sure to replace container and url. You also have to click to get it to start playing

[dorilama]

This is actually a library that you can use with the new npm plugin:

• look for wavesurfer.js library and add it to the plugin
  

• set the version to 7, the instance name to WaveSurfer and click on the save button
  

  

• now you have the library available to use in javascript actions
  

• add a div element to the page and assign an id
  

• try a basic example in a javascript action

return pluginVariables[
  /* wavesurfer.js */ "69d4a5bb-09a3-4f3d-a94e-667c21c057eb"
]["wavesurfer.js"].create({
  container: wwLib.getFrontDocument().querySelector("#waveform"),
  waveColor: "#4F4A85",
  progressColor: "#383351",
  url: "https://dl.dropbox.com/s/c4i9dvr6g7bjvhr/miku_doremi120.mp3?dl=0",
});

result:

The only unpratical thing is managing the lifecycle of the component (eg. destroy the created wavesurfer instance when the section is unmounted in the page), that is better handled with a custom component.

[Alexis]

You can try to use the On page unload trigger to add your unmount logic

[erikm3103]

It so strange, I tried replicating the exact same thing, but I dont get the wavelenght, its usually just blank, sometimes I get just a black line in the middle of the screen. I tried multiple other methods as well as audios.

Any ideas?

var wavesurfer = pluginVariables[
  /* wavesurfer.js */ "69d4a5bb-09a3-4f3d-a94e-667c21c057eb"
]["wavesurfer.js"].create({
  container: wwLib.getFrontDocument().querySelector("#waveform"),
  waveColor: "#4F4A85",
  progressColor: "#383351",
  url: "https://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3",
});

[dorilama]

There are a lot of possible things that can generate errors.
Do you have a valid url pointing to a valid file?
When are you triggering the logic? Is your container already rendered in the page when you trigger the logic?
Try opening the browser dev tools and look for errors in the console, maybe there is an error logged there

[erikm3103]

@dorilama

https://dl.dropbox.com/s/c4i9dvr6g7bjvhr/miku_doremi120.mp3?dl=0

Good points, so there was a CORS issue with the url, so I used your url, which solved the issue.

The logic is triggered on button click. The container is already rendered.

You can see from the screenshot above that the black line I was talking about shows up. (Not related to container with hight as I have tried a few things on this as well).

Here is all that Console shows. This is after loading editor and then pressing the action button that triggers the simple logic.

I’m really confused about this one

[dorilama]

probably the width of the div is not enough, check the style settings for it.

[erikm3103]

100% width - still does not work. You can see the black line I’m referincing as well. Super strange right?

[dorilama]

is 100% of the parent’s width, so it depends on the parent as well.
every time I have bugs and can’t fix them in place I try to reproduce a minimal example on an empty page, just to check if it is a problem specific with the page or if it is something in the component itself. try to see if you can make it work in a minimal example.

[erikm3103]

To anyone in this thread. It was solved by using “block” instead of “flex” in the display alternatives.