Phaser AudioContext/Resources Problem

[erronius]

Hello! I am a student working on a project (a 4x game) for school. I am using Phaser in some areas of the project but not others, and I think that's where I am getting into trouble. I'm using AngularJS routing to move back and forth between multiple partial HTML views. Every time I'm going to one of the partials that uses Phaser, I'm creating a new "game" like so:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-canvas-container',
                                  { preload: preload, create: create, update: update });

When I move back and forth between Phaser pages enough (6 times) I get this error:

"Uncaught DOMException: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6)."

Here is a link to my repo: https://github.com/pauldennis2/Simplicity-Webapp 

The pertinent code is going to be here: https://github.com/pauldennis2/Simplicity-Webapp/blob/master/src/main/resources/static/js/main.js

I think I understand the basic issue here (though feel free to correct me, I'm not too confident). I'm not using Phaser in the way it was intended to be used. Every time I create a new game, Phaser is doing stuff in the background to create resources (such as an AudioContext) and I'm never cleaning up those resources.

The main approach I've tried was variations of (if game == null) { new game ...}. Also tried storing the game in $rootScope. The problem is then the game doesn't show up at all. Tried messing around with manually calling create; similarly no dice.

Solution Metrics

• I'm not currently using sound effects/audio. If AudioContext is the only problem here (i.e. if there aren't a bunch of similar resources being created that will cause me problems down the road) then somehow disabling the creation of the AudioContext would be a reasonable solution
• I am *not* prepared to restructure my entire game to run through one instance of Phaser - if that were the only solution I would have to remove Phaser from my project, which I really hope I don't have to do because Phaser is awesome!
• A way to reliably clean up these resources would be the best solution!

Thanks in advance for any help/feedback

P.S.: Please keep in mind if you are reviewing my code that 1) I'm not really a JavaScript programmer and 2) this is very much a work in progress. 

Edited February 12, 2017 by erronius
Edited for display issues

[erronius]

Anyone have any insights on this? Still a bit stuck.

Thanks!

[ldd]

The problem is probably that very few people are using angular with phaser. I am using react with phaser, so all I can tell you is that from my position, your 'canvas' where the game is being played should never change or be updated by angular (directly). In my case, I use a redux store where I dispatch actions that eventually lead to a change in the game.

Anyways, I tried to help you by googling about 'static' 'fixed', etc canvas used with angular, but I couldn't find anything.

 

Since you are presumably always using the same game, it makes no sense to be continuously creating the game. At worst, just do a display: none on the canvas and a game.paused=true so that the game is paused. Yet, you mention that you are "*not* prepared to restructure my entire game to run through one instance of Phaser". Have you looked at states? You could have different games in different States, I guess.

From react, it was painless, but since I've never used angular I can't help. Sorry!

TL;DR: Use Phaser States, don't make a new game. Hopefully that'll solve your issues