mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-07 14:57:12 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

mic-tester: pull the media api stuff into a service.

Browse source
This commit is contained in:
gornvan 2024-10-09 21:52:56 +02:00
parent e8f17667b0
commit c7d8ea4de4
2 changed files with 106 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/tools/mic-tester/mic-tester.service.ts Normal file
View file

@ -0,0 +1,87 @@
import { ref, onBeforeUnmount } from 'vue';
export function useMicrophoneService() {
let audioContext: AudioContext | null = null;
let delayNode: DelayNode | null = null;
let sourceNode: MediaStreamAudioSourceNode | null = null;
let analyserNode: AnalyserNode | null = null;
let stream: MediaStream | null = null;
const isPlaying = ref(false);
const loudnessLevel = ref(0); // Observable for loudness
const startMicReplay = async () => {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
try {
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
} catch (err) {
console.error('Microphone access denied:', err);
alert('Microphone access denied (the error is also in the console):', err);
return;
}
sourceNode = audioContext.createMediaStreamSource(stream);
delayNode = audioContext.createDelay(1.0);
delayNode.delayTime.value = 1.0;
analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 256;
// Connect nodes: mic -> delay -> speakers
sourceNode.connect(delayNode);
delayNode.connect(audioContext.destination);
sourceNode.connect(analyserNode);
isPlaying.value = true;
measureLoudness();
};
const stopMicReplay = () => {
if (audioContext && stream) {
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());
audioContext.close();
audioContext = null;
isPlaying.value = false;
loudnessLevel.value = 0;
}
};
// Measure loudness and update loudness bar
const measureLoudness = () => {
const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
const updateLoudness = () => {
analyserNode!.getByteFrequencyData(dataArray);
// Calculate average loudness
let sum = 0;
dataArray.forEach(value => sum += value);
const average = sum / dataArray.length;
// Update the observable loudness level
loudnessLevel.value = average;
if (isPlaying.value) {
requestAnimationFrame(updateLoudness);
}
};
updateLoudness();
};
// Cleanup on service destruction
onBeforeUnmount(() => {
stopMicReplay();
});
return {
startMicReplay,
stopMicReplay,
loudnessLevel,
isPlaying
};
}

91
src/tools/mic-tester/mic-tester.vue
View file

@ -1,99 +1,23 @@
<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';
import { useMicrophoneService } from './mic-tester.service';
import { useI18n } from 'vue-i18n';
import { Microphone } from '@vicons/tabler';
const { t } = useI18n();
// Audio-related variables
let audioContext: AudioContext | null = null;
let delayNode: DelayNode | null = null;
let sourceNode: MediaStreamAudioSourceNode | null = null;
let analyserNode: AnalyserNode | null = null;
let stream: MediaStream | null = null;
const isPlaying = ref(false);
const loudnessBarWidth = ref(0);
const startMicReplayAndLoudMeter = async () => {
if (!audioContext) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
try {
stream = await navigator.mediaDevices.getUserMedia({ audio: true });
} catch (err) {
console.error('Microphone access denied:', err);
alert('Microphone access denied (the error is also in the console):', err);
return;
}
sourceNode = audioContext.createMediaStreamSource(stream);
delayNode = audioContext.createDelay(1.0);
delayNode.delayTime.value = 1.0;
analyserNode = audioContext.createAnalyser();
analyserNode.fftSize = 256;
// Connect nodes: mic -> delay -> speakers
sourceNode.connect(delayNode);
delayNode.connect(audioContext.destination);
sourceNode.connect(analyserNode);
isPlaying.value = true;
measureLoudness();
};
const stopMicReplayAndLoudMeter = () => {
if (audioContext && stream) {
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());
audioContext.close();
audioContext = null;
isPlaying.value = false;
loudnessBarWidth.value = 0;
}
};
// Measure loudness and update loudness bar
const measureLoudness = () => {
const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
const updateLoudness = () => {
analyserNode!.getByteFrequencyData(dataArray);
// Calculate average loudness
let sum = 0;
dataArray.forEach(value => sum += value);
const average = sum / dataArray.length;
// Update loudness bar width based on loudness level
loudnessBarWidth.value = average;
if (isPlaying.value) {
requestAnimationFrame(updateLoudness);
}
};
updateLoudness();
};
// Cleanup on component unmount
onBeforeUnmount(() => {
stopMicReplay();
});
const { startMicReplay, stopMicReplay, loudnessLevel, isPlaying } = useMicrophoneService();
</script>
<template>
<div>
<c-card>
<div class="control-buttons">
<c-button @click="startMicReplayAndLoudMeter" :disabled="isPlaying">{{ t('tools.mic-tester.start-button-text') }}</c-button>
<c-button @click="stopMicReplayAndLoudMeter" :disabled="!isPlaying">{{ t('tools.mic-tester.stop-button-text') }}</c-button>
<c-button @click="startMicReplay" :disabled="isPlaying">{{ t('tools.mic-tester.start-button-text') }}</c-button>
<c-button @click="stopMicReplay" :disabled="!isPlaying">{{ t('tools.mic-tester.stop-button-text') }}</c-button>
</div>
<!-- Loudness Meter -->
<div id="loudnessMeter">
<div id="loudnessBar" :style="{ width: loudnessBarWidth + '%' }"></div>
<div id="loudnessBar" :style="{ width: loudnessLevel + '%' }">
</div>
</div>
</c-card>
</div>
@ -118,4 +42,3 @@ onBeforeUnmount(() => {
justify-content: space-between;
}
</style>