如何在自有网站中启用Arc浏览器音频播放器？

我想在自己的网页上启用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那样显示播放器。

请问如何解决这个问题？

解决方法 #

Arc基于Chromium内核，但对媒体会话的触发有额外要求，按以下步骤调整即可：

1. 绑定媒体会话操作控件
   Arc需要明确注册播放/暂停等操作才能唤起迷你播放器，即使使用原生audio控件，也要手动绑定：

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', sizes: '512x512', type: 'image/png'}]
  });

  // 绑定播放操作
  navigator.mediaSession.setActionHandler('play', () => {
    const audio = document.querySelector('audio');
    audio?.play();
  });

  // 绑定暂停操作
  navigator.mediaSession.setActionHandler('pause', () => {
    const audio = document.querySelector('audio');
    audio?.pause();
  });
}

2. 确保安全环境与资源可访问
   Arc的迷你播放器仅在HTTPS环境下生效，本地开发时用ng serve --ssl启用HTTPS；同时检查音频文件的CORS配置，避免因跨域拦截导致媒体会话识别失败。

3. 提前初始化媒体会话
   仅在playing事件设置元数据可能存在延迟，建议在音频加载完成时就初始化：

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

initMediaSession(): void {
  if ('mediaSession' in navigator) {
    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', sizes: '512x512', type: 'image/png'}]
    });
  }
}

4. 验证配置有效性
   打开Arc开发者工具（F12），进入Application标签页查看Media Session面板，若能看到音频元数据和已注册的操作，说明配置正确，切换标签页后迷你播放器会自动显示。

内容的提问来源于stack exchange，提问作者Eliot Ragueneau