97 lines
2.8 KiB
HTML
97 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Microphone Mute Detector</title>
|
|
<style>
|
|
#mic-status {
|
|
width: 200px;
|
|
height: 80px;
|
|
border-radius: 5px;
|
|
background-color: red;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#mic-status.active {
|
|
background-color: green;
|
|
}
|
|
|
|
#mic-status.active:before {
|
|
content: '';
|
|
display: none;
|
|
}
|
|
|
|
#mic-status.muted:before {
|
|
content: '';
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Microphone Mute Detector</h1>
|
|
<label for="mic-select">Select microphone:</label>
|
|
<select id="mic-select"></select>
|
|
<p id="mic-status" class="muted">MUTED</p>
|
|
|
|
<script>
|
|
// Get the microphone selection dropdown
|
|
const micSelect = document.getElementById("mic-select");
|
|
|
|
// Get the status element
|
|
const micStatus = document.getElementById("mic-status");
|
|
|
|
// Populate the microphone selection dropdown
|
|
navigator.mediaDevices.enumerateDevices().then(devices => {
|
|
const audioDevices = devices.filter(device => device.kind === "audioinput");
|
|
audioDevices.forEach(device => {
|
|
const option = document.createElement("option");
|
|
option.value = device.deviceId;
|
|
option.text = device.label || `Microphone ${micSelect.options.length + 1}`;
|
|
micSelect.appendChild(option);
|
|
});
|
|
});
|
|
|
|
// Check microphone status continuously
|
|
const checkMicStatus = () => {
|
|
const selectedMic = micSelect.value;
|
|
navigator.mediaDevices.getUserMedia({ audio: { deviceId: selectedMic } }).then(stream => {
|
|
// Check if microphone is muted
|
|
const audioCtx = new AudioContext();
|
|
const source = audioCtx.createMediaStreamSource(stream);
|
|
const analyser = audioCtx.createAnalyser();
|
|
source.connect(analyser);
|
|
analyser.fftSize = 32;
|
|
const bufferLength = analyser.frequencyBinCount;
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
const updateStatus = () => {
|
|
analyser.getByteFrequencyData(dataArray);
|
|
const isMuted = dataArray.every(val => val === 0);
|
|
|
|
// Update status text and color
|
|
if (isMuted) {
|
|
micStatus.innerText = "MUTED";
|
|
micStatus.classList.add("muted");
|
|
micStatus.classList.remove("active");
|
|
} else {
|
|
micStatus.innerText = "ACTIVE";
|
|
micStatus.classList.add("active");
|
|
micStatus.classList.remove("muted");
|
|
}
|
|
};
|
|
setInterval(updateStatus, 100);
|
|
}).catch(error => {
|
|
console.error(error);
|
|
});
|
|
};
|
|
|
|
micSelect.addEventListener("change", checkMicStatus);
|
|
checkMicStatus();
|
|
</script>
|
|
</body>
|
|
</html>
|