javascript - 使用媒体 session Web API 的媒体通知不适用于 Web 音频 API

Question

我正在尝试在我的 PWA 中针对当前播放的音频内容实现自定义通知。

如标题所示；我使用 Android v8.1.0 和 Google Chrome 应用程序 v68.0.x。根据this文章:Chrome 57 支持 Media Session API。我认为我使用的版本应该是最新的才能处理这些通知。

首先，为我播放的音频内容截取代码:

let context = getContext();
await context.resume().catch(console.error);
let source = context.createBufferSource();
source.connect(context.destination);
source.start(0);

音频内容的播放工作正常，没有问题。我尝试在 source.start(..) 调用之后更新 Media Session API 的元数据，如下所示:

let updateMediaSession = (payload) => {
  if (!('mediaSession' in navigator)) {
    return;
  }

  navigator.mediaSession.metadata = new MediaMetadata({
    title: payload.title,
    artist: payload.artist,
    album: payload.album,
    artwork: [
      {
        src: '/static/logos/android-chrome-36x36.png',
        sizes: '36x36',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-48x48.png',
        sizes: '48x48',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-72x72.png',
        sizes: '72x72',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-96x96.png',
        sizes: '96x96',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-144x144.png',
        sizes: '144x144',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-256x256.png',
        sizes: '256x256',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-384x384.png',
        sizes: '384x384',
        type: 'image/png',
      },
      {
        src: '/static/logos/android-chrome-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },],
  });

  navigator.mediaSession.setActionHandler('play', () => ...);
  navigator.mediaSession.setActionHandler('pause', () => ...);
  navigator.mediaSession.setActionHandler('seekbackward', () => ...);
  navigator.mediaSession.setActionHandler('seekforward', () => ...);
  navigator.mediaSession.setActionHandler('previoustrack',() => ...);
  navigator.mediaSession.setActionHandler('nexttrack', () => ...);
};

我更新了playing state像这样:

  if ('mediaSession' in navigator) {
    navigator.mediaSession.playbackState = 'paused';
  }

和

  if ('mediaSession' in navigator) {
    navigator.mediaSession.playbackState = 'playing';
  }

问题该通知未显示在我的智能手机上。

我已将源代码部署到具有域的正确服务器上。在进行测试之前，我在智能手机上导航到该网站，清除了所有数据，卸载了任何潜在的 PWA 并刷新了页面。

似乎一切都按照预期执行，但没有显示任何内容。我期待这样的事情。

有人知道为什么这不起作用吗？

Answer 1

这里有两个问题。第一个是一个非常简单的修复。

updateNotification正在阻止updateMediaSession停止运行，否则会导致双重通知。您可以通过简单地包装 updateNotification 来解决此问题带有条件检查if(!('mediaSession' in navigation)) 。所以如果设备支持mediaSession ，使用mediaSession ，否则(它是计算机)创建通知。

第二(也是最重要的)，使用mediaSession需要audio (或 video )元素来播放以显示通知。看来您没有使用它。

您可以更改为使用 audio元素在后台，只需重新设计控件以在交互时修改它，或者您可以通过在不可见的 audio 中播放无声音频剪辑来解决它。元素并立即暂停(如果播放完毕，通知将消失)。我建议使用audio .

如果您决定使用解决方法，我发现 this repository具有不同长度的无声音频剪辑。我能开始工作的最短时间是 5 秒，再短就不会向我显示通知。