回答

以下是微信小程序实现声音分贝监测的代码:

index.wxml:

<view class="container">
  <view class="title">声音分贝监测</view>

  <view class="volume-display">
    <text class="volume-text">{{volume}} dB</text>
  </view>

  <view class="meter">
    <view class="meter-bar" style="width: {{volume}}%"></view>
  </view>

  <button class="btn" bindtap="startMonitoring" wx:if="{{!isMonitoring}}">开始监测</button>
  <button class="btn" bindtap="stopMonitoring" wx:else>停止监测</button>
</view>

index.wxss:

.container {
  padding: 30rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  margin-bottom: 40rpx;
}

.volume-display {
  margin: 30rpx 0;
}

.volume-text {
  font-size: 80rpx;
  font-weight: bold;
}

.meter {
  width: 600rpx;
  height: 40rpx;
  background: #eee;
  border-radius: 20rpx;
  margin: 40rpx auto;
  overflow: hidden;
}

.meter-bar {
  height: 100%;
  background: linear-gradient(to right, #2ecc71, #f1c40f, #e74c3c);
  transition: width 0.1s;
}

.btn {
  width: 300rpx;
  margin-top: 40rpx;
}

index.js:

const recorderManager = wx.getRecorderManager()

Page({
  data: {
    volume: 0,
    isMonitoring: false
  },

  onLoad() {
    // 配置录音相关参数
    recorderManager.onFrameRecorded((res) => {
      const { frameBuffer } = res
      if (frameBuffer.byteLength > 0) {
        // 计算音量
        const dataView = new DataView(frameBuffer)
        let sum = 0
        // 遍历音频数据计算平均振幅
        for (let i = 0; i < frameBuffer.byteLength; i += 2) {
          sum += Math.abs(dataView.getInt16(i, true))
        }
        const average = sum / (frameBuffer.byteLength / 2)

        // 将振幅转换为分贝值(近似值)
        let db = Math.round(20 * Math.log10(average))
        // 限制范围在0-100之间
        db = Math.max(0, Math.min(100, db))

        this.setData({
          volume: db
        })
      }
    })
  },

  startMonitoring() {
    // 开始录音监测
    recorderManager.start({
      duration: 999999999, // 最大时长
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'pcm',
      frameSize: 1
    })

    this.setData({
      isMonitoring: true
    })
  },

  stopMonitoring() {
    // 停止录音
    recorderManager.stop()
    this.setData({
      isMonitoring: false,
      volume: 0
    })
  },

  onUnload() {
    // 页面卸载时停止录音
    recorderManager.stop()
  }
})

需要在app.json中添加录音权限:

{
  "requiredPrivateInfos": [
    "getRecorderManager"
  ],
  "permissions": {
    "scope.record": {
      "desc": "需要使用您的录音功能"
    }
  }
}

这个实现:

使用微信小程序的录音管理器(RecorderManager)来获取音频数据通过onFrameRecorded回调获取实时的音频数据将音频数据转换为分贝值显示提供开始/停止按钮控制监测使用进度条可视化显示当前分贝值自动处理录音权限申请

注意事项:

真机测试效果会更准确分贝值是近似计算的,不是绝对精确值需要用户授权录音权限建议增加录音权限判断和错误处理逻辑