+
21
-

小程序如何测试声音分贝的代码怎么写?

小程序如何测试声音分贝的代码怎么写?

网友回复

+
28
-

800_auto

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

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;
...

点击查看剩余70%

我知道答案,我要回答