Howler.js

An Audio Sprite allows you to use a single audio file to play multiple distinct sounds by defining specific time ranges (start and end offsets) for each sound.

Key capabilities demonstrated in the sprite example include:

• Single File Management: Managing multiple sound effects within one audio asset.
• Real-time Progress Tracking: Monitoring the playback progress of individual sprites.
• Overlapping Playback: The ability to trigger multiple sprites simultaneously, allowing sounds to overlap rather than cutting each other off.

Howler.js selects the first compatible sound from your src array. For the best balance of file size and quality with maximum browser coverage, use webm as the primary format and mp3 as the fallback.

Recommended order:

1. webm (High quality, small size, nearly full coverage)
2. mp3 (Fallback for Internet Explorer)

Firefox Seekability Tip: To ensure webm files are seekable in Firefox, encode them with the dash flag using ffmpeg:

ffmpeg -i sound1.wav -dash 1 sound1.webm

To run the standalone Audio Player demo, follow these steps:

1. Clone the repository:

   git clone https://github.com/goldfire/howler.js.git

   Or download the source zip from: https://github.com/goldfire/howler.js/archive/master.zip

2. Launch the player: Open the index.html file located within the player example directory in your web browser.

To run the Audio Sprite Visual demonstration locally, follow these steps:

1. Clone the repository or download the source:
   • Use Git: git clone https://github.com/goldfire/howler.js.git
   • Or download the ZIP archive: https://github.com/goldfire/howler.js/archive/master.zip
2. Launch the example:
   • Open the index.html file located within the example directory in any modern web browser.

The examples/ directory contains various use-cases for howler.js, serving as a reference for implementing audio in different scenarios. Each sub-directory includes full source code and instructions for running the examples locally.

You can also view hosted live demos for the following core features:

• Audio Player: Basic playback controls and audio management.
• Radio: Streaming or continuous audio playback.
• Spatial Audio: Implementing 3D sound positioning.
• Audio Sprites: Using a single audio file containing multiple sound clips.

To run the 3D Spatial Audio demonstration locally:

1. Clone the repository:

   git clone https://github.com/goldfire/howler.js.git

2. Navigate to the example directory (or the root if running the main demo).
3. Open index.html in any modern web browser.

Controls in the demo:

• Movement: Arrow Keys or WASD.
• Mobile: Touch controls.

Mobile browsers and Chrome/Safari lock audio until a user interaction occurs. Howler.js attempts to unlock audio automatically on the first touchend event.

To disable this, set Howler.autoUnlock = false;.

If you need to play audio automatically on page load, listen for the playerror event and retry after the unlock event:

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3'],
  onplayerror: function() {
    sound.once('unlock', function() {
      sound.play();
    });
  }
});

sound.play();

You can install howler.js using npm, Yarn, or Bower, or include it via a CDN or local script tag.

# Using npm
npm install howler

# Using Yarn
yarn add howler

# Using Bower
bower install howler

To run the radio player demo locally, follow these steps:

1. Clone the repository or download the source:
   • Clone: git clone https://github.com/goldfire/howler.js.git
   • Download: https://github.com/goldfire/howler.js/archive/master.zip
2. Open the file: Locate the examples/radio/index.html file and open it in your web browser.

To add immersive spatial audio to 3D or other environments, use howler.js in conjunction with the Spatial Plugin. This implementation typically involves:

1. Using a dedicated Audio class: Encapsulate sound effects and spatial sounds within a custom class to manage playback logic separately from game/environment logic.
2. Leveraging Sound Sprites: For performance and organization, implement multiple game sounds using a single Howl instance and a sound sprite configuration.
3. Spatial Positioning: The Spatial Plugin allows sounds to be positioned within a 3D coordinate system, creating an immersive auditory experience that responds to the listener's position and orientation.

# This is a conceptual summary of the 3D Spatial Audio pattern used in the example.
# It utilizes the Spatial Plugin with a single Howl instance and sound sprites.

Depending on your environment, you can import Howl (for individual sounds) and Howler (for global control) using ES6 modules or CommonJS.

// ES6 modules
import {Howl, Howler} from 'howler';

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