How to Import Howler.js into an ES6 Module

This guide explains how to successfully import and use the Howler.js audio library inside a modern JavaScript ES6 module environment. Whether you are using a package manager like npm with a bundler (such as Vite, Webpack, or Rollup) or loading the library directly in the browser via a CDN, this article provides the precise import syntax and a quick implementation example to get your audio playing.

Method 1: Using npm and a Bundler

If you are building a modern web application using a module bundler, you first need to install the Howler package.

Run the following command in your terminal:

npm install howler

Once installed, you can import Howl (the core controller for individual sounds) and Howler (the global audio controller) at the top of your JavaScript file:

import { Howl, Howler } from 'howler';

Method 2: Native ES6 Modules in the Browser (CDN)

If you are writing vanilla JavaScript and using native browser ES6 modules (<script type="module">) without a bundler, you must import Howler from a CDN that serves ES modules, such as jsDelivr.

Use the following import statement at the top of your JavaScript file:

import { Howl } from 'https://cdn.jsdelivr.net/npm/howler@2.2.4/+esm';

Basic Usage Example

Once imported using either method, you can initialize and play an audio file by creating a new Howl instance:

// Setup the new Howl instance
const sound = new Howl({
  src: ['audio-file.mp3'],
  html5: true // Recommended for larger audio files to stream them
});

// Play the sound
sound.play();