CODEWITHSUNDEEP
pluginsaurelia
user3135741
user3135741

Reputation: 33

How to add a plugin in Aurelia

I am trying to use wavesurfer.js in an Aurelia project. I am not able to use the wavesurfer.js. After building it says Container Element not found. my app.js looks like this

import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';

export class App {
  wavesurferObj = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    scrollParent: true,
  });

  constructor() {
    wavesurferObj.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

    wavesurferObj.on(ready, function () {
      wavesurferObj.play();
    });
  }
}

and my main.js looks like this

// regenerator-runtime is to support async/await syntax in ESNext.
// If you target latest browsers (have native support), or don't use async/await, you can remove regenerator-runtime.
import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';
// import * as timeline from '../node_modules/wavesurfer/plugin/wavesurfer.timeline.js';
// import * as regions from '../node_modules/wavesurfer/plugin/wavesurfer.regions.js';
import 'regenerator-runtime/runtime';
import * as environment from '../config/environment.json';
import {
  PLATFORM
} from 'aurelia-pal';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.plugin(PLATFORM.moduleName('wavesurfer'));
  // aurelia.use.plugin(PLATFORM.moduleName('timeline'));
  // aurelia.use.plugin(PLATFORM.moduleName('regions'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
and just the build section in Aurelia.json looks like this

  "build": {
    "options": {
      "server": "dev",
      "extractCss": "prod",
      "coverage": false
    },
    "bundles": [{
      "name": "vendor-bundle.js",
      "dependencies": [{
          "name": "wavesurfer",
          "path": "../node_modules/wavesurfer/dist",
          "main": "wavesurfer"
        },
        {
          "name": "wavesurfer.timeline",
          "path": "../node_modules/wavesurfer/plugin",
          "main": "wavesurfer.timeline",
          "deps": [
            "wavesurfer"
          ]
        },
        {
          "name": "wavesurfer.regions",
          "path": "../node_modules/wavesurfer/plugin",
          "main": "wavesurfer.regions",
          "deps": [
            "wavesurfer"
          ]
        }
      ]
    }]
  },

Here is the error:

WaveSurfer is not defined.

Can someone indicate what is the right way to add this plugin please.

Thanks a lot in advance.

Upvotes: 1

Views: 177

Answers (1)

bigopon
bigopon

Reputation: 1964

Without having a look at all of your actual code, i'm guessing you have at least 3 errors:

  1. First one is using different variable names: wave surfer is imported as wavesurfer, but the way it's used is WaveSurfer, notice the case.

  2. Using direct path to the dist file in a node_modules package: 

import * as wavesurfer from '../node_modules/wavesurfer/dist/wavesurfer.js';

It should be: 

import * as wavesurfer from 'wavesurfer';
  1. 3rd one is targeting an element via a CSS selector string #waveform. If this is not ready by the time you create an instance of class App, it will not work properly. Where is #waveform? from the document? from app.html? If it's from the document, it's ok, but if it's from app.html, you will need to change that code to something like this
<template>
  ....
  <div ref="waveformElement"></div>
</template>

And in your app code:

import * as WaveSurfer from 'wavesurfer';

export class App {

  bind() {
    this.wavesurferObj = WaveSurfer.create({
      container: this.waveformElement,
      waveColor: 'violet',
      progressColor: 'purple',
      scrollParent: true,
    });

    this.wavesurferObj.load( 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

    this.wavesurferObj.on(ready, () => {
      this.wavesurferObj.play();
    });
  }
}

Upvotes: 1

Related Questions