Skip to main content

Sound Sprites

Sound sprites allow you to serve multiple audio tracks from a single file by defining start and end timestamps. This reduces network requests and simplifies asset management.

setSoundSprite​

setSoundSprite(id: string, sprite: { [key: string]: [number, number] }): void;

Define sprite regions for a sound. Each sprite is defined as a [startTime, endTime] tuple in seconds.

Example​

import gameSounds from "../../assets/sounds/8-bit-game-sounds.mp3";
import { SoundManager } from 'sound-manager-ts';

const soundManager = new SoundManager();

// Define sprite regions (start time in seconds, end time in seconds)
const spriteConfig = {
  nextLevel: [0, 2],
  powerUp:   [2.5, 4.5],
  jump:      [4.5, 5.5],
  fail:      [6, 8.5],
  catch:     [8.5, 9.2],
  danger:    [16.5, 18.5],
  victory:   [20.5, 22.5],
  attack:    [28, 29.5]
};

// Load the sound and set the sprite configuration
await soundManager.loadSound('game-sounds', gameSounds);
soundManager.setSoundSprite('game-sounds', spriteConfig);

// Play a specific sprite
soundManager.playSprite('game-sounds', 'powerUp', { volume: 0.8 });

getSpriteConfig​

getSpriteConfig(id: string): { [key: string]: [number, number] } | undefined;

Retrieve the sprite configuration for a given sound ID. Returns the sprite map or undefined if no sprites are configured.

Example​

const config = soundManager.getSpriteConfig('game-sounds');
if (config) {
  console.log('Sprite regions:', config);
  // { nextLevel: [0, 2], powerUp: [2.5, 4.5], ... }
}

removeSpriteSound​

removeSpriteSound(id: string, spriteKey: string): void;

Remove a specific sprite entry from a sound's sprite configuration.

Example​

// Remove the 'danger' sprite
soundManager.removeSpriteSound('game-sounds', 'danger');

// The 'danger' sprite is no longer available

removeSpriteConfig​

removeSpriteConfig(id: string): void;

Remove the entire sprite configuration for a sound, clearing all defined sprites.

Example​

// Remove all sprites for 'game-sounds'
soundManager.removeSpriteConfig('game-sounds');

// No sprites remain configured for this sound

Interactive Example​

Try it yourself! Select a sprite from the loaded sound and adjust playback options.

import { SoundManager, type PlayOptions } from 'sound-manager-ts';
import gameSounds from "../../assets/sounds/8-bit-game-sounds.mp3";

const soundManager = new SoundManager();

// Define sprite regions
const spriteConfig = {
  nextLevel: [0, 2],
  powerUp:   [2.5, 4.5],
  jump:      [4.5, 5.5],
  fail:      [6, 8.5],
  catch:     [8.5, 9.2],
  danger:    [16.5, 18.5],
  victory:   [20.5, 22.5],
  attack:    [28, 29.5]
};

// Load the sound and set the sprite configuration
await soundManager.loadSound('game-sounds', gameSounds);
soundManager.setSoundSprite('game-sounds', spriteConfig);

// Now play a specific sprite
soundManager.playSprite('game-sounds', 'powerUp', { volume: 0.8 });

// You can also pass PlayOptions to customize playback
soundManager.playSprite('game-sounds', 'victory', {
  volume: 1.0,
  playbackRate: 1.5,
  createNewInstance: false
});

Select a Sprite

Sprite range: [0s – 2s]

PlayOptions Configuration

Edit the JSON below to customize playback options

Editable
Loading sound...
Tip: Use setSoundSprite(id, config) to define sprite regions. Each sprite is defined as [startTime, endTime] in seconds. Try selecting different sprites and adjusting the volume or playbackRate.