2

I'm writing a music player with React and Electron and want to add metadata for the audio so as I can get MPRIS support. So I did some searching and found Media Session API is what I needed. To test it, I copied the code from the exmaple code contained by the above link into a function in my project.

  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Unforgettable',
    artist: 'Nat King Cole',
    album: 'The Ultimate Collection (Remastered)',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });

I put it into a function that a component will call when the next song is played.However, I got errors like this:

Failed to compile.

./src/components/FM/Cover/index.jsx
  Line 112:  'MediaMetadata' is not defined  no-undef

Search for the keywords to learn more about each error.

Why?

rapiz
  • 117
  • 11
  • I mean its literally telling you the exact problem. You havent defined `MediaMetadata`. – Isaac Vidrine Aug 09 '19 at 15:29
  • @IsaacVidrine — `MediaMetadata` is defined by the browser (the OP linked to the documentation for it). The problem is how to tell Babel / Webpage that. – Quentin Aug 09 '19 at 15:32
  • that web API is only supported by Chrome and it is a specific version – AngelSalazar Aug 09 '19 at 15:33
  • @AngelSalazar I'm using React with Electron 6.0.0. And I'm sure that this version comes with Chromium that support Media Metadata. – rapiz Aug 09 '19 at 15:39
  • well do a check before using it `if ('mediaSession' in navigator) { //execute your code } else { console.log('MediaMetadata is not supported') }` – AngelSalazar Aug 09 '19 at 15:43
  • @AngelSalazar checked. it's supported. `if ('mediaSession' in navigator) {console.log("supported");} else {console.warn("unsupported!");}` – rapiz Aug 09 '19 at 15:46
  • try window.MediaMetadata – AngelSalazar Aug 09 '19 at 15:54
  • @AngelSalazar Works like a charm! But could you please explain that? I have found a similar project with metadata support and it just uses new MediaMetadata. [Here's the commit at Line 368](https://github.com/benwiley4000/cassette/pull/148/commits/af3533e9fc8a73606690314a837afd5a4fdc369b) – rapiz Aug 09 '19 at 15:57
  • I am assuming it has to be with the bundler. when using web APIs, I personally always use window.[name_of_web_api] – AngelSalazar Aug 09 '19 at 16:02

1 Answers1

3

You need to reference the window object.

window.MediaMetadata
^^^^^^

This is because babel/es-lint does not know MediaMetadata exists and will throw an error. Since Chrome injects this object as a global variable, it is accessible via the window object.

(re-posting what @AngelSalazar said in the comments of the OP for ease of use)

Harry Merritt
  • 71
  • 3