API сеанса веб-аудио для запуска вызовов методов в приложении, а не для воспроизведения мультимедиа

Question

Мне трудно заставить Web Audio API делать то, что я хочу. Моя цель — в конечном итоге запустить распознавание голоса в PWA на мобильных устройствах, но сначала я решил сделать тестовый пример увеличения счетчика при каждом нажатии кнопки воспроизведения или паузы. Я использую фреймворк Vue.

Вот сокращенная версия моего кода вместе с графическим интерфейсом, который создается на экране.

      <template>
  <v-app>
    <v-btn @click="activateMediaButton">Start</v-btn>
    <div>{{counter}}</div>
    <v-btn @click="increment">Increment</v-btn>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      counter: 0
    };
  },

  methods: {
    increment(){
      console.log('ssedfr');
      this.counter++;
    },

    activateMediaButton(){
      navigator.mediaSession.metadata =  new window.MediaMetadata({})
      navigator.mediaSession.playbackState = 'playing';
      try{
        navigator.mediaSession.setActionHandler('play', this.increment)
        navigator.mediaSession.setActionHandler('pause',this.increment)
      }
      catch(error){console.log(error);}


  }
  }
}
</script>

Как видите, обработчики действий регистрируются, когда я нажимаю кнопку запуска в графическом интерфейсе, и предполагается, что значение счетчика увеличивается всякий раз, когда я нажимаю кнопки мультимедиа. Я протестировал этот счетчик с помощью элемента кнопки «Увеличить» в графическом интерфейсе, и он работает нормально, но вызовы для увеличения даже не запускаются при нажатии мультимедийных клавиш, что подтверждается операторами console.log. Никаких ошибок не возникает, когда блок try выполняется для регистрации действий.

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

Answer 1

Для работы с Web Media Session API страница должна воспроизводить медиафайл (видео или аудио).

Вот рабочий пример:

      <template>
  <div>
    <button @click="activateMediaButton">Start</button>
    <div>{{ counter }}</div>
    <button @click="increment">Increment</button>

    <audio
      src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
      controls
    ></audio>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
    };
  },

  mounted() {
    navigator.mediaSession.metadata = new window.MediaMetadata({
      title: "Unforgettable",
      artist: "Nat King Cole",
      album: "The Ultimate Collection (Remastered)",
      artwork: [
        {
          src: "https://dummyimage.com/512x512",
          sizes: "512x512",
          type: "image/png",
        },
      ],
    });

    navigator.mediaSession.setActionHandler("play", this.increment);
    navigator.mediaSession.setActionHandler("pause", this.increment);
  },

  methods: {
    increment() {
      this.counter++;
      // handle action from here
    },

    activateMediaButton() {
      if (navigator.mediaSession.playbackState === "playing") {
        navigator.mediaSession.playbackState = "pause";
        document.querySelector("audio").pause();
      } else {
        navigator.mediaSession.playbackState = "playing";
        document.querySelector("audio").play();
      }
    },
  },
};
</script>

Чтобы понять, как это работает, попробуйте приостановить звук вручную на странице, а затем попробуйте использовать мультимедийные клавиши.