[SOLVED] Sound slot pause() resume() doesn't actually "pause"

I’m trying to create a music player, by loading a song and creating a play/pause button that does just that. However, if I pause the song and resume it, it doesn’t pick back up from where it was paused… it seems like it just keeps going an drops volume.

I’m actually trying to create a routine that pauses the entire game, including music, but it seems like timeScale doesn’t affect sounds, so I’m adding a pause() / resume() call to the background track.

I grabbed the audios currentTime, and once I pause() it goes to zero.

var Ui = pc.createScript('ui');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

var slot, button,counter;

Ui.prototype.initialize = function () {
    this.paused = false;
    slot = this.entity.findByName("MainSound").sound.slot("track");
    var assetId = slot.asset;
    
    // Find the duration of the audio sample directly from the asset resource
    this.duration = this.app.assets.get(assetId).resource.duration;
    
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    document.body.appendChild(this.div);
    
    this.counter = 0;
    
    button = this.div.querySelector('.button');
    counter = this.div.querySelector('.counter');
    
    this.bindEvents();
};

Ui.prototype.update = function(dt) {
    for (var i = 0; i < slot.instances.length; ++i) {
        var instance = slot.instances[i];
        counter.textContent = Math.round(instance.currentTime);
    } 
};

Ui.prototype.bindEvents = function() {
    var self = this;
    if (button) {
        button.addEventListener('click', function() {
            self.togglePaused ();
        }, false);
    }
};

Ui.prototype.togglePaused = function () {
    if (this.paused) {
        this.app.timeScale = 1;
        slot.resume();
    } else {
        this.app.timeScale = 0;
        slot.pause();
    }
    
    this.paused = !this.paused;
};

Yeah something looks weird there indeed. Will have a look and get back to you.

1 Like

I think I have a fix for this I’m gonna test more tomorrow. Sorry for the inconvenience and thanks for reporting!

1 Like

Man, I’ve been cracking my head open, I thought I was doing something wrong.

Thanks for taking a look into it!

1 Like

So I pushed a fix here https://github.com/playcanvas/engine/commit/07c31abcc50e77e665468ce2dba9a820f91033f4 . The problem is that we cannot deploy the engine yet so what you can do temporarily is make a script in your project, call it something like sound-patch.js and copy paste the code from here in the script: https://github.com/playcanvas/engine/blob/07c31abcc50e77e665468ce2dba9a820f91033f4/src/sound/instance.js.

Make sure you have this patch script first in the scripts loading order in your Settings. That should allow you to at least test if these changes fix your problem (they should).

Thanks Vaios! such a quick response.

So, I created sound-patch.js, it opened up with its standard initialize and update code blocks, which I deleted and replaced with this -> https://github.com/playcanvas/engine/blob/07c31abcc50e77e665468ce2dba9a820f91033f4/src/sound/instance.js

sound-patch.js is not attached to any entity but in the scripts-loading-order, in the proeject settings, I placed it first.

I don’t get errors, but it’s still not doing it.


I tried adding it as a script to my root, but the script shows an error in the editor, however, it doesn’t show an error when launching it.

Any thoughts?

Yeah looks like just copy pasting that code won’t work. What you can do is when you launch your application add this query parameter to the URL:

?use_local_engine=https://code.playcanvas.com/playcanvas-latest.js

This will use the current master branch engine. This will allow you to see if you have any problems using that version of the engine, however if you publish your application it will still use the old engine.

I’m afraid for a permanent solution you’ll have to wait until we deploy the engine which should be done soon though.

That was it man!

Works. Can’t wait for this to be in the engine.

What do you know, I’ve been working on Playcanvas for a week, and I spotted a bug. :slight_smile:

Thanks again for the prompt response.

Just a heads up, not sure if it’s because I’m passing use_local_engine but I’m getting tons of [Violation] 'requestAnimationFrame' handler took 51ms in the console.

I seriously doubt that’s because your using a different version of the engine. I think these warning messages were only enabled in Chrome relatively recently. Are you noticing slower frame rate when using this version of the engine?

Yeah that’s been there for quite a while, I guess noone pauses and resumes sounds :smiley:

The fix from @vaios is now deployed to production. Release notes here. Enjoy!

Perfect guys, you’re amazing!

1 Like