一个基于Web的课堂噪音监测仪，它可以实时检测环境噪音并给出相应的提示。这个监测仪将包含以下功能：
1. 实时音量检测
2. 可视化音量显示
3. 噪音等级提示
4. 数据记录功能
以下是完整的代码实现：
课堂噪音监测仪
课堂噪音监测仪
0 dB
当前状态: 安静
<script>
let audioContext;
let microphone;
let analyser;
let isMonitoring = false;
let volumeInterval;
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const meterFill = document.querySelector('.meter-fill');
const volumeValue = document.querySelector('.volume-value');
const status = document.querySelector('.status');
const log = document.getElementById('log');
startBtn.addEventListener('click', startMonitoring);
stopBtn.addEventListener('click', stopMonitoring);
async function startMonitoring() {
try {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
microphone = audioContext.createMediaStreamSource(stream);
analyser = audioContext.createAnalyser();
microphone.connect(analyser);
}
isMonitoring = true;
startBtn.disabled = true;
stopBtn.disabled = false;
volumeInterval = setInterval(measureVolume, 100);
addLog("开始监测噪音");
} catch (error) {
console.error('Error:', error);
addLog("错误: 无法访问麦克风");
}
}
function stopMonitoring() {
isMonitoring = false;
startBtn.disabled = false;
stopBtn.disabled = true;
clearInterval(volumeInterval);
addLog("停止监测噪音");
}
function measureVolume() {
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
// 计算平均音量
const average = dataArray.reduce((a, b) => a + b) / dataArray.length;
const volume = Math.round(average);
// 更新显示
updateDisplay(volume);
}
function updateDisplay(volume) {
// 将音量映射到0-100的范围
const normalizedVolume = Math.min(100, volume * 1.5);
meterFill.style.width = `${normalizedVolume}%`;
volumeValue.textContent = `${volume} dB`;
// 更新状态显示
if (volume < 30) {
status.textContent = "当前状态: 安静";
meterFill.style.backgroundColor = "#4CAF50";
} else if (volume < 60) {
status.textContent = "当前状态: 正常";
meterFill.style.backgroundColor = "#FFA500";
} else {
status.textContent = "当前状态: 嘈杂";
meterFill.style.backgroundColor = "#FF0000";
addLog("警告: 噪音过大！");
}
}
function addLog(message) {
const now = new Date();
const timeString = now.toLocaleTimeString();
const logEntry = document.createElement('div');
logEntry.textContent = `[${timeString}] ${message}`;
if (message.includes("警告")) {
logEntry.classList.add('warning');
}
log.insertBefore(logEntry, log.firstChild);
}
</script>
这个课堂噪音监测仪具有以下特点：
1. **实时监测**：
- 使用Web Audio API实时捕获麦克风输入
- 显示实时分贝值
- 可视化音量条显示
2. **状态显示**：
- 安静（绿色）：< 30dB
- 正常（黄色）：30-60dB
- 嘈杂（红色）：> 60dB
3. **功能控制**：
- 开始/停止按钮
- 实时状态显示
- 日志记录功能
4. **用户友好的界面**：
- 清晰的视觉反馈
- 响应式设计
- 简洁的操作方式
5. **日志记录**：
- 记录开始/停止时间
- 记录噪音警告
- 时间戳显示
使用方法：
1. 在现代浏览器中打开页面
2. 允许麦克风访问权限
3. 点击"开始监测"按钮开始监测
4. 观察实时噪音级别
5. 需要时可点击"停止监测"按钮
注意事项：
1. 需要浏览器支持Web Audio API
2. 需要用户授予麦克风访问权限
3. 分贝值为相对值，不代表实际分贝数
这个监测仪可以帮助教师更好地控制课堂秩序，及时发现并处理课堂噪音问题。