javascriptvue.jshowler.js

Howl is not defined Vue.js 2


I installed howler using

npm install -g  howler --save

Added script

require('howler');

Even in index.html file I added

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.4/howler.js"></script>

It seems to work but every time my app reloads (I use npm run serve to run app) I get error Howl is not defined.Then I install howler once again using npm it works, but again after reloading stops working. So basically I need to reinstall howler again and again.


Solution

  • Installation

    The -g flag tells NPM to install the package globally. The --save flag tells NPM to install it locally in your project (and to save it in package.json under dependencies). Those two flags are mutually exclusive, but -g will override --save. The solution there is to remove the -g flag, while keeping --save.

    And if you're requireing it in your project, don't also import from CDN in index.html (i.e., remove the <script>).

    Usage

    To use Howl in your code, make sure to assign the return value from require('howler'):

    const { Howl } = require('howler');
    
    const sound = new Howl({
      src: ['sound.mp3']
    });
    
    sound.play();