Arc：如何为我自己的网站启用音频播放器？

Question

我正在尝试在我的网页上启用 Arc 浏览器音频播放器。
不过，我找不到 Arc 中针对开发人员的任何文档，因此我尝试使用适用于 Google Chrome 的内容，但它似乎不起作用。

到目前为止，这就是我在 Angular 上下文中所拥有的：

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'}],
    });
  }
}

此外，我的音频文件确实包含有关标题、艺术家、封面等的元数据，但切换到另一个选项卡时 Arc 不会显示任何内容，就像 Youtube Music 或 Spotify 那样。

我创建了这个 StackBlitz 来展示我目前拥有的内容：https://stackblitz.com/edit/stackblitz-starters-pxppkj?file=src%2Fmain.ts

如何让它发挥作用？

Answer 1

我提交的代码确实有效，所以这是解决方案https://stackblitz.com/edit/stackblitz-starters-pxppkj?file=src%2Fmain.ts