首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >音量检测

音量检测

作者头像
前端小鑫同学
发布2022-12-26 12:37:49
发布2022-12-26 12:37:49
1.5K00
代码可运行
举报
运行总次数:0
代码可运行

写作背景:

在一些在线会议软件、通讯软件中尤其是头一次使用麦克风设备,当电脑中存在多个麦克风设备的时候,往往初始的设备有可能并不是我们想使用的,或者有时候设备故障的时候也需要通过音量的检测来进行判断。我们可以通过音量条的显示来反馈当前设备是否正常工作。

在 HTML5 中提供的 AudioContext 对象用来专门处理音频,通过上下文创建的各种 AudioNode 相互链接。

模板定义:

提供一个启动麦克风的按钮事件和一个用来显示音量的 div 元素,通过动态改变元素的宽度来实时显示。

代码语言:javascript
代码运行次数:0
运行
复制
<template>
  <h2>音量检测</h2>
  <a-divider />
  <a-button @click="openMicrophone">打开麦克风</a-button>
  <div
    :style="{
      width: `${audioLevel}px`,
      height: '10px',
      background: '#8dc63f',
      marginTop: '20px',
    }"
  ></div>
</template>

启动麦克风和检测:

实例化 SoundMeter ,并注册监听来回调音量数据:

代码语言:javascript
代码运行次数:0
运行
复制
soundMeter.value = new SoundMeter(
    new window.AudioContext(),
    (instant: number) => {
      audioLevel.value = Number(instant.toFixed(2)) * 348 + 1;
    }
);

通过 getUserMedia 设置允许音频的约束来启动麦克风,并对接检测工具:

代码语言:javascript
代码运行次数:0
运行
复制
const constraints: MediaStreamConstraints = { audio: true, video: false };
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream: MediaStream) => {
      soundMeter.value?.connectToSource(stream);
    })
  .catch(handleError);

当组件卸载后我们需要停掉检测音量的工具类:

代码语言:javascript
代码运行次数:0
运行
复制
onUnmounted(() => {
  soundMeter.value?.stop();
});

检测音量工具类:

在工具类中通过 onaudioprocess 来实时回调音量的数据,通过计算来得到一个适用于显示的数值。

代码语言:javascript
代码运行次数:0
运行
复制
export default class SoundMeter {
  mic: MediaStreamAudioSourceNode | undefined;
  script: ScriptProcessorNode;
  context: AudioContext;
  constructor(context: AudioContext, onAudioProcess: Function) {
    this.context = context;
    this.script = context.createScriptProcessor(2048, 1, 1);
    this.script.onaudioprocess = function (event) {
      let input = event.inputBuffer.getChannelData(0) || 0;
      let sum = 0.0;
      for (let i = 0; i < input.length; ++i) {
        sum += input[i] * input[i];
      }
      onAudioProcess &amp;&amp; onAudioProcess(Math.sqrt(sum / input.length));
    };
  }

  connectToSource(stream: MediaStream) {
    this.mic = this.context.createMediaStreamSource(stream);
    this.mic.connect(this.script);
    // necessary to make sample run, but should not be.
    this.script.connect(this.context.destination);
  }

  stop() {
    this.mic &amp;&amp; this.mic.disconnect();
    this.script &amp;&amp; this.script.disconnect();
  }
}

结语:

这一篇通过一个案例完成了音量的显示和检测音量的变化,明天继续学~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写作背景:
  • 模板定义:
  • 启动麦克风和检测:
  • 检测音量工具类:
  • 结语:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档