Search code examples
javascripthtmlaudiometadata

How to provide an mp3's metadata information to users OS

This sounds like a lot of other questions, but I haven't been able to find an answer for my question. Is there a way to provide an mp3/mp4's metadata to a users OS? I'm making a music player somewhat similar to Spotify, and I was wondering how they provide metadata info like this:

enter image description here

(fyi, this is not the default windows flyout, but it shows something similar.)

I've tried using MP3Tag to add metadata information manually, but it didn't work. I am using the Audio class in JavaScript. Is there a way to achieve what I am doing using preferably plain JavaScript (I'm not opposed to using jquery or ajax)?

Thanks!

Solution

  • After asking ChatGPT, I found out that you can use the "MediaMetadata" class. I applied it using the following when another audio file is loaded:

    //other code above
let title = audioNames[genre-1][song-1].name
let artist = audioNames[genre-1][song-1].artist
metadata = new MediaMetadata({
    title: title,
    artist: artist,
    artwork:[
            {src:`albumart/${genre}/${song}.jpg`, sizes: `${image.height}x${image.width}`, type:'image/jpeg'}
    ]
})
navigator.mediaSession.metadata=metadata