vue-audio-visualでMediaStreamの音声入力を可視化する

最近はWeb会議も当たり前になってきました。ですが、Web会議の始まる前の「声は聞こえてますか」「画面は見えてますか」のやりとりには未だに慣れません😅あの一瞬し〜んとなるのがなんとも、、

さて、今回はWeb会議のマイク入力がちゃんと拾えているかビジュアライズする、よくみるゲージバーをVue.jsで実装してみます。Web Audio APIを使ってやる方法もありますが、vue-audio-visualというライブラリがあるので、そちらを使ったサンプルを作ってみたいと思います💪

インストール
プラグイン設定
コンポーネントでの利用
参考リンク

インストール

Nuxt3を使っていきます。vueuseも入れます。vueuseは、MediaDevicesの取得で使用します。

$ npx nuxi init visual
$ cd visual
$ yarn add vue-audio-visual @vueuse/core

プラグイン設定

Nuxt3のプラグインとして設定し、ライブラリのコンポーネントの中で利用可能にします。

$ mkdir plugins
$ touch plugins/vue-audio-visual.client.ts

import {
  AVPlugin,
  AVBars,
  AVCircle,
  AVLine,
  AVWaveform,
  AVMedia,
} from "vue-audio-visual";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(AVPlugin);
  nuxtApp.vueApp.component("AVMedia", AVMedia);
  nuxtApp.vueApp.component("AVBars", AVBars);
  nuxtApp.vueApp.component("AVCircle", AVCircle);
  nuxtApp.vueApp.component("AVLine", AVLine);
  nuxtApp.vueApp.component("AVWaveform", AVWaveform);
  nuxtApp.vueApp.component("AVMedia", AVMedia);
});

これで準備ができました。Nuxt3ではpluginsディレクトリ配下のプラグインは自動でロードされるので、nuxt.config.tsで指定する必要はありません。

コンポーネントでの利用

App.vueコンポーネントに組み込みんでみます。

<script lang="ts" setup>
import { useDevicesList, useUserMedia } from "@vueuse/core";
import { Ref } from "vue-demi";

const audioInputs = reactive<{
  devices: Record<string, Ref<MediaStream | undefined>>;
}>({ devices: {} });

const { audioInputs: microphones } = useDevicesList({
  requestPermissions: true,
});

watch(
  () => microphones.value,
  () => {
    for (const device of microphones.value) {
      const { stream, start } = useUserMedia({
        videoDeviceId: false,
        audioDeviceId: device.deviceId,
      });
      audioInputs.devices[device.deviceId] = stream;
      start();
    }
  },
);
</script>

<template>
  <div>
    <template v-if="!microphones">
      <p>
        使用可能なデバイスを検出できませんでした。設定で使用許可されているかご確認ください。
      </p>
    </template>
    <template v-else>
      <div v-for="i of microphones" :key="i.deviceId" class="mt-2 mb-4">
        <div>{{ i.label }}</div>
        <AVMedia
          class="mt-3 mb-1"
          :media="audioInputs.devices[i.deviceId]"
          :canv-width="82"
          type="vbar"
        ></AVMedia></div
    ></template>
  </div>
</template>

vueuseのuseDevicesListを使うとvideo、audioInput/Outputのデバイスリストを取得できます。watchでmicrophones参照を指定し、デバイスリストをaudioInputs参照に格納しています。

表示してみましょう。

yarn dev

http://localhost:3001にアクセスし、カメラとマイクの許可をすると、、

表示されました！音声に反応してゲージが動いていることを確認できます。

参考リンク

https://github.com/staskobzar/vue-audio-visual