上个小节我们在参会人列表中显示了上线的参会人，在参会人信息的左侧有麦克风图标，如果参会人说话，那么麦克风图标的背景色会出现绿色，而且绿色柱形的高矮还可以表示声音的大小。这节课咱们就把这个功能给做出来。

麦克风的音量效果很容易实现，我用了两张图片，一个是黑白的麦克风，另一个是绿色的麦克风。CSS中，我们可以设置某个区域的固定尺寸，然后用overflow:hidden，设置溢出部隐藏。我用CSS定位技术，把绿色麦克风置于不可见区域中，通过改变它的纵轴位移，让绿色麦克风覆盖在黑白麦克风之上。如果参会人说话声音很小，我们的让绿色图标露出来的就很小。如果声音很大，则让绿色麦克风露出来的更多。

一、熟悉前端页面

前端页面上的这两个麦克风是怎么设计的，我们看看具体的HTML标签。

<img class="mic" src="../assets/trtc/mic.png" />
<div class="mic-container">
    <img
        class="mic-green"
        :id="'mic-' + one.userId"
        src="../assets/trtc/mic-green.png"
    />
</div>

二、编写JS代码

如果想要知道参会人的语音大小，我们需要定语参会人的语音事件。因为在触发事件周期内语音是连续的，所以我们在回调函数中得到的数据是数组格式。

//订阅语音事件（无论本地还是远端说话，都会触发这个事件）
client.on('audio-volume', event => {
    event.result.forEach(({ userId, audioVolume, stream }) => {
        //说话声音超过5，就设置话筒音量动画
        if (audioVolume > 5) {
            $('#mic-' + userId).css('top', `${100 - audioVolume * 3}%`);
        } else {
            $('#mic-' + userId).css('top', `100%`);
        }
    });
});
// 开启音量回调函数，并设置每 30ms 触发一次事件
client.enableAudioVolumeEvaluation(30);