使用Media Session Web API的Media Notifications不适用于Web Audio API [英] Media Notifications using the Media Session Web API doesn't work with Web Audio API

问题描述

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

I'm trying to implement custom notifications into my PWA for the currently playing audio content.

如标题所述；我使用的是Android v8.1.0和Google Chrome应用v68.0.x.根据这篇文章:The Media Session API is supported in Chrome 57.我认为我正在使用的版本应该是最新版本，才能处理这些通知.

As the title states; I'm using Android v8.1.0 with the Google Chrome App v68.0.x. According to this article: The Media Session API is supported in Chrome 57. I assume the version I'm using should be more than up-to-date to work with these notifications.

首先，为我播放的音频内容添加一个代码:

First, a code snipped for the audio content I play:

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 的元数据，如下所示:

The playing of audio content works just fine, no issue here. I tried updating the metadata of the Media Session API after the source.start(..) call, like this:

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';
  }

问题 该通知不会显示在我的智能手机上.

The Problem The notification doesn't show up on my smartphone.

我已经将源代码部署到具有域的适当服务器上.导航到我的智能手机上的站点，清除了所有数据，卸载了任何潜在的PWA并刷新了页面，然后再进行测试.

I've deployed my source code to a proper server with domain. Navigated to the site on my smartphone, cleared all the data, uninstalled any potential PWAs and refreshed the page before conducting my tests.

似乎一切都按预期执行，但什么也没显示.我期望这样的事情.

It seems as if everything gets executed like one would expect but nothing is being displayed. I expected something like this.

有人知道为什么这行不通吗?

Does anyone know why this doesn't work?

推荐答案

您在这里遇到两个问题.第一个是非常简单的修复程序.

You have two issues at play here. The first one is a really simple fix.

updateNotification阻止了updateMediaSession的运行，否则会引起双重通知.您可以通过使用条件检查if(!('mediaSession' in navigation))来包装updateNotification来解决此问题.因此，如果设备支持mediaSession，请使用mediaSession，否则(这是一台计算机)创建通知.

updateNotification is preventing updateMediaSession from running, and would cause a double notification otherwise. You can fix this by simply wrapping updateNotification with a condition checking if(!('mediaSession' in navigation)). So if the device supports mediaSession, use mediaSession, otherwise (it's a computer) create a Notification.

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

Second (and most important), using mediaSession requires an audio (or video) element to play for the notification to show up. It appears you're not using that.

您可以更改为在后台使用audio元素，而只需对控件进行修改即可在交互时进行修改，或者可以通过在不可见的audio元素中播放无声音频片段并立即暂停来解决此问题.它(通知将一直播放).我建议使用audio.

You can either change to using the audio element in the background and just rework your controls to modify that on interaction, or you can work around it by playing a silent audio clip in an invisible audio element and immediately pausing it (the notification will dismiss if it plays through). I would recommend using audio.

如果您决定使用替代方法，我会发现此存储库，其中包含以下内容的无声音频剪辑:长度各不相同.我能上班的最短时间是5秒，再短一点都不会对我显示通知.

If you decide to use the workaround, I found this repository with silent audio clips of varying lengths. The shortest one I could get to work was 5 seconds, any shorter would not show a notification for me.

这篇关于使用Media Session Web API的Media Notifications不适用于Web Audio API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！