Sound Basics

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

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

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.

Run

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

Also supported loading with the PIXI.sound object.

Run

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.

Run

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.

Run

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

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

Run

const loader = new PIXI.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

Run

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.

Run

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.

Run

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.

Run

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

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

Run

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.

Run

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.

waveform.stage.removeChildren();

window.waveform = new PIXI.Application({
    width: 1024,
    height: 128,
    view: document.getElementById('waveform'),
    backgroundColor: 0xffffff
});

Run

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()
            .beginFill(0xff0000)
            .drawRect(0, 0, 1, waveform.renderer.height);
        const sprite = new PIXI.Sprite(
            new PIXI.Texture(baseTexture)
        );
        waveform.stage.addChild(sprite, playhead);
        sound.play().on('progress', function(value) {
            playhead.x = baseTexture.width * value;
        });
    });

Create a simple sine-wave tone.

Run

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.

Run

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