Arc: how to enable audio player for my own website?

I'm trying to enable the Arc browser audio player on a webpage of mine.
I cannot find any documentation from Arc targeted to developers though, so I tried by using what works for Google Chrome, but it doesn't seem to work.

So far, here's what I have, in an Angular context:

podcast.component.html

<audio controls="controls" (playing)="onPlay()">
<source src="assets/audio/ComplexPortal%20-%20Overview%20podcast.mp3">
Your browser does not support the HTML5 Audio element.
</audio>


podcast.component.ts

@Component({
selector: 'cp-podcast',
standalone: true,
templateUrl: './podcast.component.html',
styleUrl: './podcast.component.scss'
})
export class PodcastComponent {
onPlay(): void {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Complex Portal - Overview Podcast',
artist: 'Complex Portal',
album: 'Complex Portal - Podcast',
artwork: [{src: 'assets/images/CP-square-profile.png'}],
});
}
}


Also my audio file does contain the meta-data about title, artists, cover, etc. and yet nothing gets displayed by Arc when switching to another tab, as it does for Youtube Music or Spotify.

I created this StackBlitz to showcase what I currently have: https://stackblitz.com/edit/stackblitz-starters-pxppkj?file=src/main.ts

How to make it work?

Continue reading...