BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Howler.js Audio Library for the Modern Web

Howler.js Audio Library for the Modern Web

This item in japanese

Howler.js provides a modern audio library with support for the Web Audio API and a fallback mechanism for HTML5 Audio. The project strives to streamline cross-platform development efforts with audio in JavaScript.

Howler.js offers a consistent API for using audio with JavaScript, with control over common audio patterns including play, pause, seek to rate, fade and loop. Audio files are automatically cached where possible to improve playback performance.

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

Or Howler.js may be imported as a dependency leveraging ES modules:

import {Howl, Howler} from 'howler';

const {Howl, Howler} = require('howler');

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

Howler.js provides two high-level constructs for working with audio:

  • Audio Sprites - Define and control segments of audio files using sprites for precise playback and smaller resources
  • Spatial Audio - Provides audio perspectives such as stereo pan or 3D game audio

A significant challenge with audio is supporting codecs. Howler.js supports the 14 different forms available today in browsers including MP3, OPUS, OGG, WEBM, and more.

Howler.js supports all modern web browsers, with support back to Internet Explorer 9, as well as usage within hybrid mobile apps using Cordova and the HTML5-based Facebook Instant Games platform.

The Web Audio API is known for having several challenges in its current implementation. The specification has been under steady change for more than five years, with several rounds of deprecations of crucial features. Recent work moves the audio processing to a separate thread similar to web workers with AudioWorklets. Browser support for Web Audio remains inconsistent, and Howler.js helps developers avoid some of these challenges.

The most recent challenge is the introduction of requiring user interaction before an audio clip may play, without a mechanism to approve auto-play for specific websites.

SitePen senior software engineer Paul Shannon shares his thoughts with InfoQ on Howler.js and the present and future of Web Audio:

Web audio is like Canvas for sound, giving that low level access to sound. Following that logic, Howler.js is to Web Audio like Threejs is to 3D graphics. Maybe once web audio is fully adopted, we'll see Instagram-like filters start to show up for audio!

Several large technology and media companies leverage Howler.js including Google, Disney, mozilla, and Lego.

Howler.js maintains a modular architecture starting at 7KB gzipped. Howler.js is available under the MIT open source license. Contributions are welcome via the Howler.js GitHub project.

Rate this Article

Adoption
Style

BT