How to Add Metadata to Audio Files for Howler.js

This article explains how to add and read metadata in sound files for use with the Howler.js audio library. Since Howler.js does not natively parse embedded audio tags like ID3, you will learn the most effective workarounds: attaching custom metadata directly to your Howler objects, using external JavaScript parsers for embedded file tags, and utilizing audio sprites for timing-based metadata.

Method 1: Attaching Custom Metadata Directly to Howler Objects

The most efficient way to use metadata with Howler.js is to define it directly within the configuration object when instantiating a new Howl player. Because JavaScript allows you to append custom properties to objects, you can store track information directly alongside the audio source.

const sound = new Howl({
  src: ['track.mp3'],
  html5: true,
  // Custom metadata object
  metadata: {
    title: 'Symphony No. 5',
    artist: 'Ludwig van Beethoven',
    album: 'Classic Masterpieces',
    genre: 'Classical'
  }
});

// Accessing the metadata in your application
console.log(`Now playing: ${sound._navigator ? sound.metadata.title : sound.metadata.title} by ${sound.metadata.artist}`);

This method avoids the overhead of parsing binary audio files on the client side, making it ideal for web applications with a known database of audio tracks.

Method 2: Reading Embedded ID3 Tags with an External Parser

If your application allows users to upload their own audio files, you must read the metadata embedded directly inside the file container (such as MP3 ID3 tags). Since Howler.js only handles audio decoding and playback, you need a secondary library like jsmediatags to read the metadata.

  1. Tag your files: Use a desktop tool like Mp3tag or Audacity to embed title, artist, and cover art metadata into your audio files.
  2. Parse and play: Use the parser to extract the metadata, then pass the file URL to Howler.js.
// Example using jsmediatags to read a local or remote file
jsmediatags.read("path/to/audio.mp3", {
  onSuccess: function(tag) {
    const tags = tag.tags;
    
    // Initialize Howler.js with the audio source
    const sound = new Howl({
      src: ['path/to/audio.mp3']
    });

    // Use the parsed metadata in your UI
    console.log(`Title: ${tags.title}, Artist: ${tags.artist}`);
  },
  onError: function(error) {
    console.log('Error reading tags: ', error.type, error.info);
  }
});

Method 3: Using Audio Sprites for Timing Metadata

If your metadata consists of specific segment markers, chapters, or sound effects within a single audio file, you can define this data using Howler’s native sprite property. Sprites serve as timing metadata, allowing you to map specific keys to timestamps (start time and duration in milliseconds).

const soundSprite = new Howl({
  src: ['sounds.mp3'],
  sprite: {
    laser: [0, 1000],      // Starts at 0s, lasts 1s
    explosion: [1500, 3000], // Starts at 1.5s, lasts 3s
    background: [5000, 20000, true] // Starts at 5s, lasts 20s, loops
  }
});

// Play a specific metadata segment
soundSprite.play('laser');