使用vue3封装一个hooks实时获取麦克风音量

之前是在做一个electron项目中需要去检测音量,检测音量不是为了证明音量本身,而是去看看麦克风是否正常响应。

如图所示:这是一个模仿腾讯会议的音量检测的UI


在浏览器中是无法获取真实设备的电平输入的,所以此方法是通过后去音频数据来计算出音量,并非系统实际音量

使用场景
  • 在web端对麦克风进行检测,看看麦克风是否有效
  • 在electron、Capacitor等以web交互为主开发的应用都可以支持(比如:electron应用)
ts 复制代码
// useVolume.ts

import { ref } from 'vue'

/**
 * 实时获取麦克风音量
 * 此方法是通过后去音频数据来计算出音量,并非系统实际音量
 * @param _audioContext 如果传入AudioContext,则使用它,否则新建一个音频来获取音量大小
 * @returns
 */
export const useVolume = () => {
  const audioContext = ref<AudioContext | null>()
  const analyser = ref<AnalyserNode | null>(null)
  const isStart = ref<boolean>(false)
  // 音量[0, 100]
  const volume = ref<number>(0)

  /**
   * 开启音量检测
   * @param _source 数据源
   * @param _audioContext audio上下文 (用于在录音的过程中同时去检测,这样就不需要再次创建多一个audio上下文)
   * @param deviceId 麦克风设备ID,用于指定检测那个麦克风的音量
   */
  const startVolumeCheck = async (
    _source?: MediaStreamAudioSourceNode | null,
    _audioContext?: AudioContext | null,
    deviceId?: string | null,
  ) => {
    if (!audioContext.value) {
      if (_audioContext) {
        audioContext.value = _audioContext
      } else {
        audioContext.value = new AudioContext()
      }
    }

    isStart.value = true
    const mediaOptions = deviceId
      ? { audio: { deviceId: deviceId } }
      : { audio: true }
    let source = _source
    if (!source) {
      const stream = await navigator.mediaDevices.getUserMedia(mediaOptions)
      source = audioContext.value.createMediaStreamSource(stream)
    }

    analyser.value = audioContext.value.createAnalyser()
    analyser.value!.fftSize = 32
    source.connect(analyser.value!)

    // 创建数据缓冲区
    const bufferLength = analyser.value!.frequencyBinCount
    const dataArray = new Uint8Array(bufferLength)

    // 定义更新音量的函数
    function updateVolume() {
      analyser.value!.getByteFrequencyData(dataArray)

      let sum = 0
      for (let i = 0; i < bufferLength; i++) {
        sum += dataArray[i]
      }
      volume.value = Math.floor((sum / bufferLength / 255) * 100)

      if (isStart.value) {
        requestAnimationFrame(updateVolume)
      } else {
        volume.value = 0
      }
    }

    // 开始更新音量
    updateVolume()
  }
  
  // 暂停检测
  const stopVolumeCheck = () => {
    isStart.value = false
    analyser.value?.disconnect()
  }

  return {
    startVolumeCheck,
    stopVolumeCheck,
    volume,
    isStart,
  }
}

提示:在检测麦克风之前,需要获取麦克风权限,并且获取到你正在使用的麦克风

相关推荐
uhakadotcom几秒前
Socket.IO 简明教程:实时通信的基础知识
前端·javascript·面试
机器视觉知识推荐、就业指导21 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4927 分钟前
golang接口-interface
java·前端·golang
慕斯策划一场流浪33 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
hepherd1 小时前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI1 小时前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端