[SOLVED] Audio mutes when out of tab focus. Different with YouTube

Help & Support
1

I have noticed that the audio mutes when out of tab focus. This is different with YouTube, where both video and sound keeps on playing.

I guess I can change settings for individual websites like with this method; https://www.tenforums.com/tutorials/112920-enable-disable-tab-audio-muting-google-chrome.html but I want to keep playing a Playcanvas site when out of focus (focus is on another tab) - and make this a standard, that the user have to turn off … not on.

2

Hi @Thomas_Due_Nielsen,

That happens on purpose to synchronize rendering with audio, since rendering is paused anyhow when the tab loses focus (the browser pauses that).

Here is the engine part that suspends all audio playing when a tab loses visibility:

Potentially an option could be added in the engine to disable that behavior, try posting a feature request on the engine repo.

In the meantime you could start playing an audio using the HTML5 audio API directly, that way you aren’t restricted by the engine on that.

2 Likes
3

Ok, thanks.

Will mark as solved (theoretically) … still need the repo change later.

1 Like
4

Worse case scenario, this function is very easy to patch out locally on your project. No need to wait an official change.

I would patch isHidden to always return false.

5

ok, this is an approach which is quite new for me then …
A) Should I do patch within index.html-by- or should I try and export/use an altered editor-export (my own Github-repo)?
B) Either way, I would not know how to … but nice to expand knowledge upon these grips

6

Hi @Thomas_Due_Nielsen,

Add a script to your Root entity and add the following code in the initialize method:

MyScript.prototype.initialize = function(){
    this.app.isHidden = function() {
        return false;
    }
};

This will disable the audio muting behavior.

7

For comparison, the way I do this is to create a new script with the following content:

(function() {
    pc.Application.prototype.isHidden = function() {
        return false;
    }
})();

And change the script loading to be ‘After Engine’

image
image1060×898 46.9 KB

This way, it’s not dependent on a scriptType to execute the patch.

1 Like
8

Hmm … I suppose you mean:

var Test = pc.createScript('test');

// initialize code called once per entity
Test.prototype.initialize = function() {
   
    pc.Application.prototype.isHidden = function() {
        return false;
  

};

};

// update code called every frame
Test.prototype.update = function(dt) {
    
};

Otherwise the .js-file won’t compile.

[having tested above, there is no difference - audio still mutes on focus-loss]

9 
var Test = pc.createScript('test');

// initialize code called once per entity
Test.prototype.initialize = function() {
   
   this.app.isHidden = function() {
        return false;
    };

};
  • was tried by Root-attachment also @Leonidas
10

I don’t, no. It’s an anonymous function that executes when the script is added to the HTML page

11
  • ok, should I export to own website, and not settle by launch-environment?
12

Example: https://playcanvas.com/editor/scene/1129521 (click on the launch tab page to play the sound)

2 Likes
13

ok, got it … Leo’s was somewhat right (a semicolon was missing, and as Asset):


var Test = pc.createScript('test');

// initialize code called once per entity
Test.prototype.initialize = function() {
   
   this.app.isHidden = function() {
        return false;
    };

};

Thanks to both of you :slight_smile:

14

yes works as well … wonder though, how come it compiled with a ‘red cross’ in my case/editor?

15

Errors and warnings in editor are from the code syntax highlighter, and are indications for possible errors or warnings for bad code practices.

Your code executes when you launch your app, and depending on the severity of the error, the app may be able to boot correctly.

2 Likes