使用媒体会话 Web API 的媒体通知不适用于 Web 音频 API

Question

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

如标题所述；我使用 Android v8.1.0 和 Google Chrome 应用程序 v68.0.x。根据this文章：

The Media Session API is supported in Chrome 57

。我认为我使用的版本应该是最新的才能处理这些通知。

首先，我播放的音频内容的代码片段：

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

音频内容的播放工作正常，没有问题。 我尝试在 source.start(..) 调用之后

更新媒体会话 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', () => ...);
};

我像这样更新

播放状态：

  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

。

如果您决定使用解决方法，我发现

此存储库包含不同长度的无声音频剪辑。我能开始工作的最短时间是 5 秒，再短就不会向我显示通知。

Answer 2

在 iOS 上也遇到同样的问题。根据经验，我发现如果媒体元素静音（如

mediaElement.muted = true

）和/或音量关闭（如

mediaElement.volume = 0

），控件不会出现。