Audio high memory usage on phaser

[trpzn]

I'm currently working on a jukebox in phaser but i found a big problem, when change more than 17 song mobile devices crushes.
I start looking the memory usage on chrome and see that although i use audio destroy, clear game cache, and reset references memory usage keep rise song by song loaded.
I could not find a solution in phaser so do the same example with howler, and it happened the same, the use of memory kept going up. Search the forums and find this interesting solution / advice that incredibly worked
 

Quote

mzgoddard commented on Jan 15, 2016

@lTyl have you tried using the buffer flag on your music? Its recommended that Web Audio buffers are not longer than 45 seconds. Howler's buffer flag will instruct it to use an Audio Tag for that Howl instead of Web Audio (you can use web audio and audio tags together by creating other howls without the buffer flag). The way Howler uses Web Audio, it decodes your sound effects into their raw format (this is the most common use case for Web Audio). Thats ok for small tracks but has issues with large tracks. For your music you'll probably want the buffer flag. If your 10 MB of sounds is a non-wav format, like I'm guessing your music is as well, you may need to manage what is and isn't in loaded.

Is it possible to use the html5 tag in one audio and the webaudio Api in another on phaser? or fix the high memory usage?
With this solution in my example i pass from 400mb on memory to 80mb on memory.

The code:

phaser-howler:

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

function preload() {

    game.load.spritesheet('button', 'assets/flixel-button.png', 80, 20);
    game.load.bitmapFont('nokia', 'assets/nokia16black.png', 'assets/nokia16black.xml');
	game.load.json('audios', 'assets/audios.json', false);
}

var currentSong;
var songList;
var prevSong;
var nextSong;
var currIndex = -1;

var logYPosition = 0;
var logYSeparation = 2;
var fontSize = 16;

var currentTextLog;

var timer = 0;
var initTimer = 0;
var downloadTime = 0;
var decodingTime = 0;
var songLength = 0;

var audioFolder = "";
var repTime = 1*1000;

var volume = 0.5;

var readyToplay = false;
var ended = false;

var tempjs = undefined;

function create() {

	tempjs = game.cache.getJSON('audios');
	game.stage.backgroundColor = "#FFFFFF";

	songList = tempjs.files;
	audioFolder = tempjs.audiosource;

	startNextSong();

}

function startNextSong(){
	currIndex++;
	initTimer = 0;
	downloadTime = 0;
	decodingTime = 0;
	songLength = 0;
	if(currIndex>songList.length) {
		game.add.bitmapText(10, logYPosition + 7, 'nokia', "no more songs in playlist", fontSize);
		ended = true;
		return;
	}
	logYPosition += fontSize + logYSeparation;
	var audios = _getAudioFilesArray(audioFolder,songList[currIndex],tempjs.audiotypes);
	initTimer = game.time.time;
	
	currentSong = new Howl({
		src: audios,
		html5: true
	});
	
	currentSong.once('load', songLoadComplete);
	currentTextLog = game.add.bitmapText(10, logYPosition + 7, 'nokia', "Downloading song " + currIndex, fontSize);

}

function songLoadComplete(){

	downloadTime = game.time.time - initTimer;
	currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ " Decoding file...";

	initTimer = game.time.time;
	currentSong.play();
	readyToplay = true;
}

function _getAudioFilesArray(audioFolder,audioName,audiotypes){
	var returnArray = [];
	for(var audiotype in audiotypes){
		var audio = audiotypes[audiotype];
		returnArray[audiotype] = audioFolder+audioName+audio;
	}

	return returnArray;
}


function update(){
	if(ended){
		return;
	}
	if(currentSong!= undefined && currentSong.playing() && readyToplay){

		var playingTime = (repTime - currentSong.seek()*1000);
		currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ "ms Decoding time: " + decodingTime + "ms Playing " + playingTime;
	}
	if(currentSong!= undefined && readyToplay && currentSong.playing() && (currentSong.seek()*1000>repTime)){
		currentSong.stop();
		currentSong.unload();
		currentSong = undefined;
		readyToplay = false;
		startNextSong();
	}
}

phaser-only:

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

function preload() {

    game.load.spritesheet('button', 'assets/flixel-button.png', 80, 20);
    game.load.bitmapFont('nokia', 'assets/nokia16black.png', 'assets/nokia16black.xml');
	game.load.json('audios', 'assets/audios.json', false);
}

var currentSong;
var songList;
var prevSong;
var nextSong;
var currIndex = -1;

var logYPosition = 0;
var logYSeparation = 2;
var fontSize = 16;

var currentTextLog;

var timer = 0;
var initTimer = 0;
var downloadTime = 0;
var decodingTime = 0;
var songLength = 0;

var audioFolder = "";
var repTime = 1*1000;

var volume = 0.5;

var readyToplay = false;
var ended = false;

var tempjs = undefined;

function create() {

	tempjs = game.cache.getJSON('audios');
	game.stage.backgroundColor = "#FFFFFF";

	songList = tempjs.files;
	audioFolder = tempjs.audiosource;

	startNextSong();

}

function startNextSong(){
	currIndex++;
	initTimer = 0;
	downloadTime = 0;
	decodingTime = 0;
	songLength = 0;
	if(currIndex>songList.length) {
		game.add.bitmapText(10, logYPosition + 7, 'nokia', "no more songs in playlist", fontSize);
		ended = true;
		return;
	}
	logYPosition += fontSize + logYSeparation;
	
	game.load.onLoadComplete.removeAll();
	var audios = _getAudioFilesArray(audioFolder,songList[currIndex],tempjs.audiotypes);
	game.load.audio(songList[currIndex],audios,false);

	initTimer = game.time.time;
	game.load.onLoadComplete.add(songLoadComplete, this);

	currentTextLog = game.add.bitmapText(10, logYPosition + 7, 'nokia', "Downloading song " + currIndex, fontSize);

	game.load.start();
}

function songLoadComplete(){

	downloadTime = game.time.time - initTimer;
	currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ " Decoding file...";

	initTimer = game.time.time;
	currentSong = game.add.audio(songList[currIndex],0);
	currentSong.onPlay.addOnce(songLoadDecode,this);
	currentSong.play();
}

function _getAudioFilesArray(audioFolder,audioName,audiotypes){
	var returnArray = [];
	for(var audiotype in audiotypes){
		var audio = audiotypes[audiotype];
		returnArray[audiotype] = audioFolder+audioName+audio;
	}
	console.log(returnArray);
	return returnArray;
}

function songLoadDecode(){
	decodingTime = game.time.time - initTimer;
	console.log(currentSong.isDecoding);
	currentSong.volume = volume;
	readyToplay = true;
}

function update(){
	if(ended){

		return;
	}
	if(currentSong!= undefined && currentSong.isPlaying && readyToplay){
		var playingTime = (repTime - currentSong.currentTime)/1000;
		currentTextLog.text = songList[currIndex] + " download time: "+downloadTime+ "ms Decoding time: " + decodingTime + "ms Playing " + playingTime;
	}
	if(currentSong!= undefined && readyToplay && currentSong.isPlaying && (currentSong.currentTime>repTime)){
		currentSong.stop();
		currentSong.destroy();
		console.log(songList[currIndex]);
		game.cache.removeSound(songList[currIndex]);
		readyToplay = false;
		startNextSong();
	}
}

 

[trpzn]

help? xD