How can I use music-metadata in electron-vite?

[angelsf3]

Is there an existing issue for this?

• [X] I have searched the existing issues

music-metadata version

10.6.0

Current Behavior

Hi, I'm following the example for the node version for the parseFile function, but I'm getting this error: 'Error parsing metadata: musicMetadata.parseFile is not a function'..

I'm working with Electron+Vite using Node version: 22.9.0 in the Main process, so I use import { parseFile } from 'music-metadata'.

When I go to the parseFile definition everything looks ok.

I've got the same error when I use parseStream.

Expected Behavior

Get the file information.

Attached audio sample?

• [X] I have provided sufficient information to reproduce the issue

[Borewit]

When working with Electron and music-metadata, there are important considerations for using the library effectively:

1. Electron Architecture and File Parsing
   The Electron framework is built from two main components: Chromium (render process) and Node.js (main process). Parsing files with music-metadata should be done in the main process for the following reasons:

   • The music-metadata library requires Node.js-specific imports to access its full functionality.
   • Only the main process (Node.js) has native file access capabilities.
   • Time-consuming tasks, such as file parsing, should be performed in the main process to avoid blocking the render process and degrading UI responsiveness.

2. ESM Compatibility in Electron + Vite
   Verify whether your Electron + Vite setup supports ECMAScript Modules (ESM). If it only supports CommonJS, refer to the CommonJS backward compatibility guide for additional instructions.

3. Accessing music-metadata Results in the Render Process
   Since the render process runs in Chromium and does not have direct access to Node.js APIs, the results from music-metadata need to be passed from the main process to the render process. This can be done using Electron’s IPC (Inter-Process Communication) system. Here's how:

   • Main Process: Use the music-metadata library to parse the audio file and send the results to the render process.

     const { ipcMain } = require('electron');
     const mm = require('music-metadata');
     const path = require('path');
     
     ipcMain.handle('parse-audio-file', async (event, filePath) => {
     try {
      const metadata = await mm.parseFile(filePath);
      return metadata;
     } catch (error) {
      console.error('Error parsing file:', error);
      throw error;
     }
     });

   • Render Process: Use ipcRenderer to request and receive the parsed metadata from the main process.

     const { ipcRenderer } = require('electron');
     
     async function getAudioMetadata(filePath) {
     try {
      const metadata = await ipcRenderer.invoke('parse-audio-file', filePath);
      console.log('Metadata:', metadata);
      return metadata;
     } catch (error) {
      console.error('Error fetching metadata:', error);
     }
     }
     
     // Example usage
     const filePath = 'path/to/your/audio/file.mp3';
     getAudioMetadata(filePath());

     By following these steps, I expect you can efficiently parse audio metadata in the main process and make it accessible to the render process. Please let me know if this guidance worked for you.

[angelsf3]

Hi, thanks for the comment and the right title. I'm going to tell you what happened since your comment.

I think that Electron + Vite works with ESM because I work with Typescript and I use import/export instead require/module.exports and everything works fine. Here's the framework tsconfig.ts:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "sourceMap": false,
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": false,
    "noImplicitReturns": true
  }
}

I tried with require() and I got the same error. When I use the second step of your answer, the library works. That works with import or require

const { loadMusicMetadata } = require('music-metadata'); // works
// import { loadMusicMetadata } from 'music-metadata' works too

(async () => {
  // Dynamically loads the ESM module in a CommonJS project
  const mm = await loadMusicMetadata();

  const metadata = await mm.parseFile('/path/to/your/file');
})();

I supose that is because some Electron + Vite's configuration so I need to use loadMusicMetadata approach. But now I can get the file information without that problem.

Thanks for the support. Thank you so much

[Borewit]

Good to hear it is working, may help others as well.

I think that Electron + Vite works with ESM because I work with Typescript and I use import/export instead require/module.

Better to use the second option, the import using TypeScript:

// Importing music-metadata in a CommonJS project, written in TypeScript 
import { loadMusicMetadata } from 'music-metadata' ; 

(async () => {
  // Dynamically loads the ESM module in a CommonJS project
  const mm = await loadMusicMetadata();

  const metadata = await mm.parseFile('/path/to/your/file');
})();

But that does not determine if you are using ESM or CommonJS. In a CommonJS project TypeScript will transpile your import to require.

But that the fact that loadMusicMetadata works, indicates that your project is CommonJS, or least that portion of the project.

[angelsf3]

Oh. I see, use TS is not mandatory to use ESM or CommonJS. Thanks a lot again and I hope this help other people with this issue too. Great library.