Cannot play a new sound and pause the previous

Help & Support
1

Hi everyone,

I’m working with 3d sounds of playcanvas, but I it seems to not working when I try to refresh the audio with another.

What I want to do is to play a sound when we join, then when the user clicks on a button, the event stops the current sound and play the new. And with this code, it does not stop the sound and does not play the new sound :grimacing:

Here is my code :

const soundElement = element.sound.slot('test');

element.sound.pause();
                        element.sound.stop();

                        if (soundElement) {
                            soundElement.volume = 0;
                            soundElement.pause();
                            soundElement.stop();
                        }

                        this.app.assets.loadFromUrl(url, 'audio', (error, asset) => {
                            if (error) console.error(error);

                            if (asset) {
                                const audio_name = 'newaudio';

                                try {
                                    element.sound.addSlot(audio_name, {
                                        asset: asset,
                                        autoPlay: true,
                                        loop: true,
                                        overlap: true
                                    });

                                    element.sound.play(audio_name);
                                } catch (e) {

                                }
                            }
                        });

Here’s a demo : PlayCanvas | HTML5 Game Engine
Editor : PlayCanvas | HTML5 Game Engine

Did I do something wrong ?

Thanks a lot in advance and have a good day,
Corentin

2

The example throws an exception when clicking on the button because newImageElement is not defined:

        if (asset) {
            const audio_name = 'test';

            try {
                newImageElement.sound.addSlot(audio_name, {
                    asset: asset,
                    autoPlay: true,
                    loop: true,
                    overlap: true
                });

                newImageElement.sound.play(audio_name);

                if (document.getElementById(`Sign-${value.id}-${index}-${j}-video`)) {
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).pause();
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).currentTime = 0;
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).play();
                }
            } catch (e) {

            }
        }
3

This fork works fine for me: PlayCanvas 3D HTML5 Game Engine

var Init = pc.createScript('init');

// initialize code called once per entity
Init.prototype.initialize = function () {
    const element = this.entity;

    // setup first sound
    element.sound.addSlot('test', {
        asset: this.app.assets.find('1094.mp3', 'audio'),
        autoPlay: true,
        loop: true,
        overlap: true
    });

    element.sound.play('test');

    // setup button
    const button = document.createElement('button');
    const style = document.createElement('style');

    button.innerHTML = 'Change sound';
    // replaces sound
    button.onclick = () => {
        const soundElement = element.sound.slot('test');

        element.sound.pause();
        element.sound.stop();

        if (soundElement) {
            soundElement.volume = 0;
            soundElement.pause();
            soundElement.stop();
        }

        const asset = this.app.assets.find('423.mp3', 'audio');

        if (asset) {
            const audio_name = 'lightning';

            try {
                element.sound.addSlot(audio_name, {
                    asset: asset,
                    autoPlay: true,
                    loop: true,
                    overlap: true
                });

                element.sound.play(audio_name);

                if (document.getElementById(`Sign-${value.id}-${index}-${j}-video`)) {
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).pause();
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).currentTime = 0;
                    document.getElementById(`Sign-${value.id}-${index}-${j}-video`).play();
                }
            } catch (e) {
                console.log(e);
            }
        }
    };

    style.innerHTML = `
        button {
            position: absolute;

            bottom: 50px;
            right: 50px;
        }
    `;

    document.body.append(button, style);
};

// update code called every frame
Init.prototype.update = function (dt) {

};

// swap method called for script hot-reloading
// inherit your script state here
// Init.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/