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

$ npx nuxi init visual

$ cd visual

$ yarn add vue-audio-visual @vueuse/core

プラグイン設定

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

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

1 2	$ 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);
});

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>

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>

<div>

<p>

使用可能なデバイスを検出できませんでした。設定で使用許可されているかご確認ください。

</p>

</template>

<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

yarn dev

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

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

参考リンク

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