麦克风设备检测

主要介绍了媒体设备麦克风的相关检测实现，包括扬声器检测、麦克风检测（音量动态展示）、录音检测等

要使用浏览器媒体功能，如麦克风、摄像头，一般需要先进行一下设备检测，确认设备功能正常。特别是线上考试或者测试前，都有这种检测页。

1. 扬声器检测

扬声器检测比较简单，就是播放一个音频文件，看能不能听到声音。

直接展示audio标签即可

html 复制代码

<audio
  src="@/assets/audio/testspeak.mp3"
  controlslist="nodownload"
  controls
  loop
  crossorigin="anonymous"
></audio>

当然也可以获取媒体设备列表中的扬声器，然后进行音频播放测试，我做的比较简单。

获取扬声器列表可以查看WebRTC 之媒体设备列表 enumerateDevices

2. 麦克风检测

麦克风检测一般是获取麦克风列表，实时监听麦克风，然后对着说话，展示音量大小，看音量条是否变化。

html 复制代码

// 展示麦克风列表
<a-select
  :options="audioDevices"
  v-model="audioSelect"
  @change="changeAudio"
></a-select>
// 展示音量条大小数据
<div class="audio-wrapper">
  <div class="audio-player">
    <audio autoplay playinline></audio>
  </div>
  <div class="audio-volume" :style="{ width: volumeRate + '%' }"></div>
</div>

获取媒体麦克风权限，通过getUserMedia来实现

获取设备列表，通过getDevices实现，audioinput表示麦克风，audiooutput表示扬声器，可以根据需求修改过滤条件

监听麦克风音量大小，通过AudioContext实现

js 复制代码

// 获取媒体麦克风权限
getUserMedia({ audio: true }, (mediaStream) => {
  // 获取设备列表
  this.getDevices();

  // 监听麦克风音量大小
  this.stream = mediaStream;
  this.getAudioVolume(mediaStream);
});

// 获取麦克风音量
getAudioVolume(stream) {
  // 创建一个音频上下文对象
  const audioContext = window.AudioContext || window.webkitAudioContext;
  this.audioCtx = new audioContext();

  // 创建媒体流输入源节点，将音频流连接到该节点
  const liveSource = this.audioCtx.createMediaStreamSource(stream);

  // 创建音频分析对象，用于检测音频的音量级别
  // 采样的缓冲区大小为2048，输入和输出都是单声道
  const levelChecker = this.audioCtx.createScriptProcessor(2048, 1, 1);

  // 将该分析对象与麦克风音频进行连接
  liveSource.connect(levelChecker);

  // 将该分析对象连接到音频上下文的目标节点（通常是扬声器）
  levelChecker.connect(this.audioCtx.destination);

  levelChecker.onaudioprocess = (e) => {
    // 获取输入缓冲区的数据
    const buffer = e.inputBuffer.getChannelData(0);

    // 计算音频的平方和，即音频信号的能量
    let sum = 0.0;
    for (let i = 0; i < buffer.length; i += 1) {
      sum += buffer[i] * buffer[i];
    }

    // 计算音频的平均音量并将其转化为百分比形式
    const volume = Math.round(Math.sqrt(sum / buffer.length) * 100);

    // 打印音频大小
    console.log(`volume: ${volume}`);
    this.volumeRate = volume;
  };
}

切换麦克风监听：需要先关掉媒体流，然后通过 deviceId 打开指定设备，开启监听模式

js 复制代码

// 关闭操作
async closeStream() {
  if (this.stream && this.stream.getTracks()) {
    this.stream.getTracks().forEach((track: MediaStreamTrack) => {
      track.stop();
    });
  }
  await this.audioCtx?.close();
}

// 切换媒体设备操作
async changeAudio(deviceId) {
  await this.closeStream();
  getUserMedia({ audio: { deviceId } }, (mediaStream) => {
    this.stream = mediaStream;
    // 监听麦克风音量大小
    this.getAudioVolume(mediaStream);
  });
}

3. 录音检测

录音检测：用户录制自己的一段声音，然后播放听听是否符合自己的声音，录音质量咋样，是否有噪音干扰等等，检测用户设备整体质量。

直接使用js-audio-recorder插件

创建录音：配置参数如下

sampleBits：采样位数，支持 8 或 16，默认是 16
sampleRate：采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值
numChannels：声道，支持 1（单声道）或 2（双声道），默认是 1

js 复制代码

import Recorder from "js-audio-recorder";
// 创建录音对象
const recorder = new Recorder({
  sampleBits: 16,
  sampleRate: 16000,
  numChannels: 1,
});

开始录音：默认录制 5s 的声音，5s 后自动停止。

js 复制代码

startRecord() {
  this.isRecording = true;
  recorder.start();
  this.time = 5;
  this.timer = setInterval(() => {
    this.time--;
    if (this.time <= 0) {
      this.stopRecord();
    }
  }, 1000);
}

停止录音

js 复制代码

stopRecord() {
  clearInterval(this.timer);
  this.isRecording = false;
  this.timer = null;
  recorder.stop();
}

播放录音

js 复制代码

playRecord() {
  recorder.play();
}