I have successfully implemented a playlist player using howler.js in vuejs. Now, I am looking to enhance it by integrating the MediaMetadata API. While the MediaSession API is functioning well with controls like notification bar, keyboard controls, and remote devices, I am facing challenges in setting the audio's metadata (title, artist, album, artwork) using MediaMetadata.
I followed the instructions provided in this tutorial and checked out the corresponding GitHub repo.
The specific error message I'm encountering is:
error 'MediaMetadata' is not defined no-undefI am running the code on chrome 57. To test browser compatibility, I used the following code snippet:
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 doesn't support MediaMetadata")
}
Even though the above code confirms that the browser supports the MediaMetadata API, the error MediaMetadata is not defined still persists.
I attempted importing it from the package @mdn/browser-compat-data as shown below:
const MediaMetadata = require("@mdn/browser-compat-data").api.MediaMetadata;
However, this resulted in the error:
Uncaught TypeError: MediaMetadata is not a constructorI also tried exploring solutions like the one suggested in this thread, but unfortunately, the issue remains unresolved.
If anyone could provide assistance with this matter, I would greatly appreciate it. Thank you in advance.