playSprite

playSprite(id: string, spriteKey: string, options: PlayOptions, skipDispatchEvent?: boolean): void;

Play a specific sprite from a sound by its ID and sprite key. Optionally, provide PlayOptions for customization.

---

You can use PlayOptions as second argument. Click the link PlayOptions to see more.

You can use the SoundHubConfig to configure you soundHub with default values. Click here to see more about the SoundHubConfig.

Example

// @ts-ignore
import gameSounds from "../../assets/sounds/8-bit-game-sounds.mp3";

import { SoundHub, type PlayOptions} from 'soundhub';

const soundHub = new SoundHub();

// 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 soundHub.loadSound('game-sounds', gameSounds);
soundHub.setSoundSprite('game-sounds', spriteConfig);

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

// You can also pass PlayOptions to customize playback
soundHub.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

{ "volume": 0.8, "playbackRate": 1, "createNewInstance": false, "pan": 0, "loop": false }

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.