Sound Basics


Creation of a sound is simple. Normally play returns the SoundInstance, but in this case it does not because the sound is not preloaded.

const sound = PIXI.sound.Sound.from('resources/boing.mp3');;

To start playing the sound immediately after load is finished use the autoPlay flag.

    url: 'resources/mechanical.mp3',
    autoPlay: true,
    complete: function() {
        console.log('Sound finished');

Globally, you can also use the PIXI.sound library methods (add, play) for adding and playing a sound as well.

PIXI.sound.add('bird', 'resources/bird.mp3');'bird');


Not all web-browsers support different file extensions for audio playback. Setup fallback formats easily by useing the a glob-like expression for the file extension. This will prioritize format from left to right.

PIXI.Loader.shared.add('applause', 'resources/applause.{ogg,mp3}');
PIXI.Loader.shared.load(function(loader, resources) {;

Also supported loading with the PIXI.sound object.

PIXI.sound.add('applause', 'resources/applause.{ogg,mp3}');'applause');


Preloading a sound can be enabled by passing in the preload flag. You can listen for when the sound is loaded by using the loaded callback.

    url: 'resources/bird.mp3',
    preload: true,
    loaded: function(err, sound) {;

PIXI's loader can be used to load Sound assets. This returns the Sound object on the Resource's sound property.

PIXI.Loader.shared.add('bird', 'resources/bird.mp3');
PIXI.Loader.shared.load(function(loader, resources) {;

Alternatively, use new PIXI.Loader(), if you don't want to use the shared loader.

const loader = new PIXI.Loader();
loader.add('bird', 'resources/bird.mp3');
loader.load(function(loader, resources) {;


Volume can be set initially by using the object constructor

const sound = PIXI.sound.Sound.from({
    url: 'resources/boing.mp3',
    volume: 0.25

Volume can also be set by changing the volume property.

const sound = PIXI.sound.Sound.from('resources/boing.mp3');
sound.volume = 0.25;;


Preloaded sounds return a SoundInstance object which can be used to listen to playback events such as a the progress and end.

    url: 'resources/boing.mp3',
    preload: true,
    loaded: function(err, sound) {
        const instance =;
        instance.on('progress', function(progress) {
            console.log('Amount played: ', Math.round(progress * 100) + '%');
        instance.on('end', function() {
            console.log('Sound finished playing');


Library is the simplest way to create a cache of sounds.

PIXI.sound.add('boing', 'resources/boing.mp3');'boing');

Library utilities are available to help manage the cache of sounds.

    boing: 'resources/boing.mp3',
    bird: 'resources/bird.mp3',
    mechanical: 'resources/mechanical.mp3'

Couple of convenience methods (find, exist, duration) for manipulating and checking sounds.

PIXI.sound.add('boing', {
    url: 'resources/boing.mp3',
    preload: true,
    loaded: function() {
        // duration can only be used once the sound is loaded
        console.log('Duration: ', PIXI.sound.duration('boing'), 'seconds');
console.log('Exists?', PIXI.sound.exists('boing'));
console.log('Sound: ', PIXI.sound.find('boing'));


First setup an Application to render the waveform.

window.waveform = new PIXI.Application({
    width: 1024,
    height: 128,
    view: document.getElementById('waveform'),
    backgroundColor: 0xffffff
PIXI.Loader.shared.add('applause', 'resources/applause.mp3')
    .load(function(loader, resources) {
        const sound = resources.applause.sound;
        const baseTexture = PIXI.sound.utils.render(sound, {
            width: waveform.renderer.width,
            height: waveform.renderer.height,
            fill: '#999'
        const playhead = new PIXI.Graphics()
            .drawRect(0, 0, 1, waveform.renderer.height);
        const sprite = new PIXI.Sprite(
            new PIXI.Texture(baseTexture)
        waveform.stage.addChild(sprite, playhead);'progress', function(value) {
            playhead.x = baseTexture.width * value;

Create a simple sine-wave tone.

const sound = PIXI.sound.utils.sineTone(523.251, 3);;

There's a utility method for playing a sound once. It is immediately destroyed and after this.

PIXI.sound.utils.playOnce('resources/mechanical.mp3', function() {
    console.log('Sound finished');