Add visual elements using NPM

Ask us anything
5

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
    image

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

    image
    image613×533 22.7 KB

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

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

  • 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:
chrome_5JkubsGMNN

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.