Sound Demo

// List of files to load
const manifest = [
    { alias: 'loop1', src: 'resources/loops/loop1.mp3' },
    { alias: 'loop2', src: 'resources/loops/loop2.mp3' },
    { alias: 'loop3', src: 'resources/loops/loop3.mp3' },
    { alias: 'loop4', src: 'resources/loops/loop4.mp3' },
    { alias: 'bird', src: 'resources/bird.mp3' },
    { alias: 'boing', src: 'resources/boing.mp3' },
    { alias: 'buzzer', src: 'resources/buzzer.mp3' },
    { alias: 'car', src: 'resources/car.mp3' },
    { alias: 'chime', src: 'resources/chime.mp3' },
    { alias: 'success', src: 'resources/success.mp3' },
    { alias: 'sword', src: 'resources/sword.mp3' },
    { alias: 'whistle', src: 'resources/whistle.mp3' },
];

// Add to the PIXI loader
PIXI.Assets.addBundle('demo', manifest);
PIXI.Assets.loadBundle('demo').then((resources) => {
    const plays = document.querySelectorAll('button[data-sound]');
    for (let i = 0; i < plays.length; i++) {
        const button = plays[i];
        const alias = button.dataset.sound;
        const sound = resources[alias];
        button.addEventListener('mousedown', function() {
            const button = this;
            const sound = resources[button.dataset.sound];
            const loop = !!button.dataset.loop;
            const playing = !parseInt(button.dataset.playing);
            if (loop) {
                togglePlaying(button);
                sound.stop();
                progressBar(button, 0);
            }
            if (playing) {
                const instance = sound.play({
                    loop: loop,
                    singleInstance: loop
                });
                instance.on('progress', function(progress, duration) {
                    progressBar(button, progress);
                });
                instance.on('end', function() {
                    progressBar(button, 0);
                });
            }
        });
    }
});

// Toggle visual of looping buttons
function togglePlaying(button) {
    const playing = !parseInt(button.dataset.playing);
    button.className = button.className.replace(/ (play|stop) btn\-(info|default)/, '');
    button.className += playing ? ' stop btn-info' : ' play btn-default';
    button.dataset.playing = playing ? 1 : 0;
}

// Update the progress bar
function progressBar(button, progress) {
    const bar = button.querySelector('.progress-bar');
    bar.style.width = (progress * 100) + '%';
}

// Handle global volume changes
document.querySelector('#volume').addEventListener('input', function() {
    PIXI.sound.volumeAll = Math.max(0, 
        Math.min(1, parseFloat(this.value))
    );
});

// Handle stop all button
document.querySelector("#stop").addEventListener('click', function() {
    PIXI.sound.stopAll();
    const plays = $$('button[data-sound]');
    for (let i = 0; i < plays.length; i++) {
        const button = plays[i];
        if (button.dataset.playing === "1") {
            togglePlaying(button);
        }
        progressBar(button, 0);
    }
});

// Handle pause/resume all
document.querySelector("#paused").addEventListener('click', function() {
    const paused = PIXI.sound.togglePauseAll();
    this.className = this.className.replace(/\b(on|off)/g, '');
    this.className += paused ? 'on' : 'off'; 
});

// Handle mute/unmute all
document.querySelector("#muted").addEventListener('click', function() {
    const muted = PIXI.sound.toggleMuteAll();
    this.className = this.className.replace(/ (on|off)/g, ' ');
    this.className += muted ? 'on' : 'off'; 
});