'MediaMetadata' is not defined no-undef and MediaMetadata is not a constructor

Question

I've implemented playlist player using howler.js in vuejs. I want to integrate MediaMetadata API to it. MediaSession API is working fine with controls like notification bar, keyboard controls, remote devices. But I'm unable to set audio's metadata(title,artist,album,artwork) using MediaMetadata. Followed the tutorial given github repo.

Getting below error: error 'MediaMetadata' is not defined no-undef

I'm using chrome 57 to run it. Also tested browser compatibility with following code :

if ('mediaSession' in navigator) {
    console.log("Browser supports MediaMetadata API")
    navigator.mediaSession.metadata = new MediaMetadata({
      title: "my_track_name",
      artist: "track_artist_name",
      album: "track_album_name",
      artwork: "track_image",
    });

} else {
    console.log("Your browser doean't support MediaMetadata")
}

Above code prints Browser supports MediaMetadata API, but it continuously throwing error MediaMetadata is not defined.

I had also tried to import it from package @mdn/browser-compat-data like following :

const MediaMetadata = require("@mdn/browser-compat-data").api.MediaMetadata;

Now, it's showing below error : Uncaught TypeError: MediaMetadata is not a constructor.

Also tried this solution but no luck, error continues.

Can anyone plese help me with this? Thanks in advance.

Answer 1

Fixed it by using new window.MediaMetadata({}) instead of new MediaMetadata({})