Web Audio Session API 用于触发应用程序中的方法调用而不是播放媒体

Question

我很难让 Web Audio API 来做我想做的事情。我的目标是最终在移动设备上的 PWA 中触发语音识别，但首先我决定做一个测试用例，在按下播放或暂停时递增计数器。我正在使用Vue框架。

这是我的代码的缩写版本以及在屏幕上创建的 GUI。

<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>

如您所见，当我单击 GUI 上的开始按钮时，就会注册操作处理程序，并且每当我按下媒体按钮时计数器值就会增加。我已经使用 GUI 上的增量按钮元素测试了该计数器，它工作正常，但是当按下媒体键（如 console.log 语句所确认）时，对增量的调用甚至不会被触发。执行 try 块来注册操作时不会引发错误。

我正在通过使用笔记本电脑上的媒体键来测试此功能，否则这些键会播放和暂停任何打开的选项卡中可用的媒体。我已经关闭了所有其他媒体选项卡，以便没有任何东西拦截击键。我确实注意到，每当我在注册操作后按下媒体按钮时，焦点都会转到触发注册的“开始”按钮元素，就像在单击它一样。 我还在我的手机上通过 Netlify 托管的 PWA 和蓝牙耳机对此进行了测试，但它也不起作用。

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>

要了解其工作原理，请尝试从页面手动暂停音频，然后尝试使用媒体键。