FMOD web integration with React.js

Hi,

I’m trying to use FMOD in a javascript project using React.js. I managed to import fmodstudio.js with the two other files (fmodstudio.js.mem and fmodstudioL.js.mem). FMODModule is well imported and used as a constructor. The prerun() function is well executed and then the main() function, but it blocks at initApplication() when I try to load a bank, CHECK_RESULT fails:

CHECK_RESULT(
gSystem.loadBankFile(
“/Master.bank”,
FMOD.STUDIO_LOAD_BANK_NORMAL,
bankhandle
)
);

And the errors is “Error!!! ‘Unsupported file or audio format.’”

What is the problem? When I try the same code using vanilla JS with Web Server for Chrome, it does work, but with React.js it doesn’t.

Can you please help?

Thank you.

I’m not sure which code below is essential but maybe this can help you:

export function prerun() {
  // Loading all the banks
  var fileUrl = globalMobile ? "/static/audio/Mobile/" : "/static/audio/Desktop/"
  var folderName = "/"
  var canRead = true
  var canWrite = false

  const fileName = [
	"Master Bank.bank",
	"Master Bank.strings.bank",
	"MUSIC.bank",
	"SFX.bank",
	"UI.bank",
  ]
  FMOD.fileName = fileName

  for (var count = 0; count < fileName.length; count++) {
	FMOD.FS_createPreloadedFile(
	  folderName,
	  fileName[count],
	  fileUrl + fileName[count],
	  canRead,
	  canWrite
	)
  }
}

// Helper function to load a bank by name.
export function loadBank(name) {
  var bankhandle = {}
  CHECK_RESULT(gSystem.loadBankFile("/" + name, FMOD.STUDIO_LOAD_BANK_NORMAL, bankhandle))

  return bankhandle
}

// Called from main, does some application setup.  In our case we will load some sounds.
export function initApplication() {
  for (var count = 0; count < FMOD.fileName.length; count++) {
	const bankhandle = loadBank(FMOD.fileName[count])
	var eventCounter = {}
	bankhandle.val.getEventCount(eventCounter)

	var array = []
	var capacity = eventCounter.val
	var counter = {}

	bankhandle.val.getEventList(
	  array, // writes value to array.val
	  capacity,
	  counter // writes value to count.val
	)

	var path = {}
	var retrieved = {}
	var size = 512

	for (let eventIndex = 0; eventIndex < array.val.length; eventIndex++) {
	  array.val[eventIndex].getPath(
		path, // writes value to path.val
		size,
		retrieved // writes value to retrieved.val
	  )
	}
  }

Consider using one of the example .banks

Thank you for your reply, I tested your code, but it is the exact same code as mine. I just changed the folder location:

var fileUrl = “/public/banks/”;
var folderName = “/”;
var canRead = true;
var canWrite = false;

const fileName = [
“Master.bank”,
“Master.strings.bank”,
“SFX.bank”,
];

You can see below the architecture of my project:

It fails at loadBank function at the CHECK_RESULT function call. Result is “19”.
I think it finds the file but just can’t read it. Have you ever tried with React.js?

Thank you.

You may need to remove /public and just refer to /banks. This is due to how routing is done with the initial setup with react.js.

But my setup is slightly different, as I include the fmodstudio.js as a node module with some modifications, though I still have to include the fmodstudio.js.mem file in public in order for it to be loaded in properly.

If you’re still having trouble, could you post your javascript?

1 Like

Waw ! Thank you so much @joshua_strawchildgam ! It directly worked !

Just a best practice question, do you think it is clean to do the way I imported the library though? That’s to say, import it in index.html from public folder and then call FMODModule construction in my src folder?
As some other people, I also wanted to import it as a module “import {FMODModule} from ‘…/scripts/fmodstudio.js’” for example, but there was some errors with ESLint and I couldn’t fix them.

I just hope I won’t have any problem when I’ll push to production, after building etc, that’s one of my worries.

Thank you.

Best practice for react.js, I would suggest node modules.

This is because you can add/import it into specific components. If you’re building a website that isn’t 100% fmod, then having the script directly in index.html would be problematic. As a module, you import it to a component, and then on componentDidMount() you will initialize the FMODModule().

There are some issues creating a module, you have to change a few things in the script, mainly how it finds/downloads the .mem file. However, you wouldn’t have any of those ESLint or ‘use strict’ issues.

Just look up how to create and install a custom node module. Basically include a package.json with the fmodstudio.js (or index.js) and then npm install /path/to/custom/module. Then you just

import FMODModule from ‘fmodstudio’;

1 Like

Can you publish one for example?

fmodstudio.js:9 GET http://localhost:4000/fmodstudio.wasm 404 (Not Found)
both async and sync fetching of the wasm failed