PixiJS Sound Basics

Playing

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');
sound.play();

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

PIXI.sound.Sound.from({
    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');
PIXI.sound.play('bird');

Filetypes

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.add('applause', 'resources/applause.{ogg,mp3}');
PIXI.loader.load(function(loader, resources) {
    resources.applause.sound.play();
});

Also supported loading with the PIXI.sound object.

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

Preloading

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.

PIXI.sound.Sound.from({
    url: 'resources/bird.mp3',
    preload: true,
    loaded: function(err, sound) {
        sound.play();
    }
});

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

PIXI.loader.add('bird', 'resources/bird.mp3');
PIXI.loader.load(function(loader, resources) {
    resources.bird.sound.play();
});

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

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

Volume

Volume can be set initially by using the object constructor

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

Volume can also be set by changing the volume property.

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

Events

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

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

Library

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

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

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

PIXI.sound.add({
    boing: 'resources/boing.mp3',
    bird: 'resources/bird.mp3',
    mechanical: 'resources/mechanical.mp3'
});
PIXI.sound.play('boing');
PIXI.sound.play('bird');
PIXI.sound.play('mechanical');

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'));

Utilities

First setup an Application to render the waveform.

window.waveform = new PIXI.Application(1024, 128, {
    view: document.getElementById('waveform'),
    backgroundColor: 0xffffff
});
PIXI.loader.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()
            .beginFill(0xff0000)
            .drawRect(0, 0, 1, waveform.renderer.height);

        waveform.stage.addChild(PIXI.Sprite.from(baseTexture), playhead);
        sound.play().on('progress', function(value) {
            playhead.x = baseTexture.width * value;
        });
    });

Create a simple sine-wave tone.

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

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');
});