Wavesurfer.js: webpack and plugin import

[simdax]

Hello all,

really good job, very simple and efficient lib !

Using webpack I can install wave surfer easily, but I fail to load plugins.

import WaveSurfer from "wavesurfer";
import Regions from "wavesurfer/plugin/wavesurfer.regions"

it builds, but in the console i get

Uncaught ReferenceError: WaveSurfer is not defined
    at Object.<anonymous> (wavesurfer.regions.js:4)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.__WEBPACK_AMD_DEFINE_ARRAY__ (wavesurfer.js:2)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (vue.js:5)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (index.js:1)
    at __webpack_require__ (bootstrap a294b25…:19)
    at Object.<anonymous> (main.js:4)
    at __webpack_require__ (bootstrap a294b25…:19)
(anonymous) @ wavesurfer.regions.js:4
__webpack_require__ @ bootstrap a294b25…:19
__WEBPACK_AMD_DEFINE_ARRAY__ @ wavesurfer.js:2
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ vue.js:5
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ main.js:4
__webpack_require__ @ bootstrap a294b25…:19
(anonymous) @ bootstrap a294b25…:39
(anonymous) @ bootstrap a294b25…:39

Not really a bug I think but seems a plugin require failure...

any clue??

[katspaugh]

An ES6-friendly version is being worked on in the next branch.

@mspae do you think we can do npm publish --tag beta for the next branch at this point?

[mspae]

@katspaugh I would be delighted. That's what I intended to say with https://github.com/katspaugh/wavesurfer.js/pull/1035#issuecomment-287312146 – I'm sorry, I should have been more vocal pushing for release. :)

[katspaugh]

@mspae thanks, I see! I've updated the version and the dist and pushed to the next branch. Published version 2.0.0-beta01 on npm with a beta tag.

@simdax can you try with npm install --save [email protected]?

The plugin init syntax changed a bit, please follow the description in https://github.com/katspaugh/wavesurfer.js/pull/1025

[simdax]

it works for what I tried :)

import WaveSurfer from 'wavesurfer.js';
import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js';
import RegionPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js';
import SpectrogramPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.spectrogram.min.js';
import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js';
import ElanPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.elan.min.js';


// ... initialising waveform with plugins
var wavesurfer = WaveSurfer.create({
    container: '#wave',
    waveColor: 'violet',
    plugins: [
        SpectrogramPlugin.create({
            container:"#iu"
        }),
        CursorPlugin.create(),
        ElanPlugin.create({
            container:"#ia"
        }),
        RegionPlugin.create(),
        TimelinePlugin.create({
            container:"#io"
        }),
        MinimapPlugin.create()
    ]
});

wavesurfer.load("../audio/song.mp3")

https://postimg.org/image/k2qq3szpb/

PS : what is elan and cursor ??

PPS : oh, and it seems that there is some changes in plugins behavior, like for Region and "enableDragSelection"

[mspae]

@simdax Yay Elan is a plugin to render ELAN annotation below the waveform.

The Cursor plugin renders a thin line at the position of the mouse if you hover over the waveform.

The regions API should be backward compatible. You can use wavesurfer.enableDragSelection() after having initialised the regions plugin. A nicer way would be to use
the new initialisation options: Currently you're not initialising the regions plugin with any but you could do:

  // ... other plugins
  RegionPlugin.create({
    dragSelection: true
  }),
  // ... other plugins

[simdax]

var wavesurfer = WaveSurfer.create({
container: '#wave',
waveColor: 'violet',
plugins: [
RegionPlugin.create({
dragSelection: true
// this works
}),
]
});

// but this dont
// wavesurfer.enableDragSelection();

with the second, I have this error :

wavesurfer.regions.min.js:6 Uncaught TypeError: Cannot read property 'slop' of undefinedvalue @ 
wavesurfer.regions.min.js:6enableDragSelection @ 
wavesurfer.regions.min.js:6(anonymous function) @ 
wavesurfer.js:53__webpack_require__ @ 
bootstrap 76cf78e…:19(anonymous function) @ 
index.js:1__webpack_require__ @ 
bootstrap 76cf78e…:19(anonymous function) 
@ main.js:4__webpack_require__ @
 bootstrap 76cf78e…:19(anonymous function) @
 bootstrap 76cf78e…:39(anonymous function) @ 
bootstrap 76cf78e…:39

[katspaugh]

enableDragSelection takes a settings object as an argument. It's mentioned in the docs.

[simdax]

okay, but it's not clear to me what I have to fill the dictionary with

I was just copy/pasting the codepen example from docs, where its an empty object, I have also an error :

wavesurfer.regions.min.js:6Uncaught TypeError: Cannot read property 'addEventListener' of 
undefinedvalue @ wavesurfer.regions.min.js:6enableDragSelection @ 
wavesurfer.regions.min.js:6(anonymous function) @
 wavesurfer.js:55__webpack_require__ @ 
bootstrap 0f0273a…:19(anonymous function) @
 index.js:1__webpack_require__ @ 
bootstrap 0f0273a…:19(anonymous function) @ 
main.js:4__webpack_require__ @ 
bootstrap 0f0273a…:19(anonymous function) @
 bootstrap 0f0273a…:39(anonymous function) @
 bootstrap 0f0273a…:39

  // Enable creating regions by dragging
  wavesurfer.enableDragSelection({});

followed with "add regions"

But I imagine that it's a specific syntax. I think anyway the "plugins" syntax is better :)

[katspaugh]

The dictionary has the same options as individual regions (see the Options section on that page). I agree the new syntax looks nicer.

[sht5]

what is the alternative solution to use plugins with webpack before v2?