Медиа-уведомления с использованием Media Session Web API не работают с Web Audio API - PullRequest
Новая
       12

Медиа-уведомления с использованием Media Session Web API не работают с Web Audio API

0 голосов
/ 07 сентября 2018

Я пытаюсь внедрить пользовательские уведомления в PWA для воспроизводимого в данный момент аудиоконтента.

Как указано в заголовке; Я использую Android v8.1.0 с приложением Google Chrome v68.0.x. Согласно этой статье: 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);

Воспроизведение аудио контента работает просто отлично, здесь нет проблем. Я попытался обновить метаданные Media Session API после вызова source.start(..), например: 

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', () => ...);
};

Событие I обновляет состояние воспроизведения примерно так: 

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

и 

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

Проблема Уведомление не отображается на моем смартфоне.

Я развернул свой исходный код на соответствующем сервере с доменом. Перешел на сайт на моем смартфоне, очистил все данные, удалил все потенциальные PWA и обновил страницу перед проведением моих тестов.

Кажется, что все выполняется так, как можно было бы ожидать, но ничего не отображается. Я ожидал что-то подобное.

Кто-нибудь знает, почему это не работает? enter image description here

1 Ответ

0 голосов
/ 19 сентября 2018

У вас есть две проблемы в игре здесь. Первый - действительно простое исправление.

updateNotification запрещает запуск updateMediaSession и в противном случае может вызвать двойное уведомление. Это можно исправить, просто обернув updateNotification проверкой состояния if(!('mediaSession' in navigation)). Поэтому, если устройство поддерживает mediaSession, используйте mediaSession, в противном случае (это компьютер) создайте уведомление.

Во-вторых (и это наиболее важно), для использования mediaSession требуется элемент audio (или video), чтобы уведомление отображалось. Похоже, вы этим не пользуетесь.

Вы можете либо перейти на использование элемента audio в фоновом режиме и просто переделать элементы управления, чтобы изменить его при взаимодействии, либо обойти его, проиграв тихий аудиоклип в невидимом элементе audio и немедленно приостановив это (уведомление будет отклонено, если оно воспроизводится). Я бы порекомендовал использовать audio.

Если вы решите использовать обходной путь, я нашел этот репозиторий с тихими аудиоклипами различной длины. Самый короткий, который я смог получить на работу, был 5 секунд, любой более короткий не будет показывать мне уведомление.

...