MTG / essentia.js

JavaScript library for music/audio analysis and processing powered by Essentia WebAssembly
https://essentia.upf.edu/essentiajs
GNU Affero General Public License v3.0
627 stars 41 forks source link

Usage with React Native / Expo #144

Open kitce opened 1 month ago

kitce commented 1 month ago

What is the issue about?

What part(s) of Essentia.js is involved?

Description

Thank you creating this library, it looks interesting. I am planning to develop a mobile app to integrate Essentia.js in React Native / Expo. Although it supports modern browsers, it seems to not work with React Native.

It will be great to have an example or documentation on integrating Essential.js into React Native / Expo.

Steps to reproduce / Code snippets / Screenshots

What I have tried:

// index.tsx
import Essentia from 'essentia.js/dist/essentia.js-core.es.js';
import EssentiaWASM from 'essentia.js/dist/essentia-wasm.web.js';

const EssentiaWasm = await EssentiaWASM();
                           ^^^ ReferenceError: Property 'document' doesn't exist

The essentia-wasm.web.js may assume this is a browser environment, therefore some code failed on React Native environment.

Then I tried to import the .wasm file and pass it into the Essentia constructor directly, but Expo cannot import the raw binary file data, instead it returns the ID(?) of the imported module, I guess that's why the Essentia class fails to initiate an instance.

// metro.config.js
config.resolver.assetExts.push('wasm');

// index.tsx
import Essentia from 'essentia.js/dist/essentia.js-core.es.js';
import EssentiaWasm from 'essentia.js/dist/essentia-wasm.web.wasm'; // `EssentiaWasm` is just a number here

const essentia = new Essentia(EssentiaWasm);
                     ^^^ TypeError: Cannot read property 'prototype' of undefined

System info

Expo: 51.0.9 React Native: 0.74.1 Device: iOS Simulator iPhone 15 Pro iOS 17.2 Essentia.js: 0.1.3