public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

mic-tester: use toasting service from naive-ui, and also lint it all up

Browse Source
This commit is contained in:
gornvan 2024-10-09 22:40:01 +02:00
parent db63103101
commit 17a885f097
2 changed files with 59 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/tools/mic-tester/mic-tester.service.ts
View File

@ -1,6 +1,7 @@
import { ref, onBeforeUnmount } from 'vue';
import { onBeforeUnmount, ref } from 'vue';
export function useMicrophoneService() {
// messageSender has to support error(text) method for notifying the user of errors
export function useMicrophoneService(messageSender) {
let audioContext: AudioContext | null = null;
let delayNode: DelayNode | null = null;
let sourceNode: MediaStreamAudioSourceNode | null = null;
@ -10,48 +11,8 @@ export function useMicrophoneService() {
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 = () => {
function measureLoudness() {
const dataArray = new Uint8Array(analyserNode!.frequencyBinCount);
const updateLoudness = () => {
@ -69,10 +30,50 @@ export function useMicrophoneService() {
requestAnimationFrame(updateLoudness);
}
};
updateLoudness();
};
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);
messageSender.error('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();
};
function stopMicReplay() {
if (audioContext && stream) {
const tracks = stream.getTracks();
tracks.forEach(track => track.stop());
audioContext.close();
audioContext = null;
isPlaying.value = false;
loudnessLevel.value = 0;
}
};
// Cleanup on service destruction
onBeforeUnmount(() => {
stopMicReplay();
@ -82,6 +83,6 @@ export function useMicrophoneService() {
startMicReplay,
stopMicReplay,
loudnessLevel,
isPlaying
isPlaying,
};
}

20
src/tools/mic-tester/mic-tester.vue
View File

@ -1,23 +1,29 @@
<script setup lang="ts">
import { useMicrophoneService } from './mic-tester.service';
import { useI18n } from 'vue-i18n';
import { useMessage } from 'naive-ui';
import { useMicrophoneService } from './mic-tester.service';
const message = useMessage();
const { t } = useI18n();
const { startMicReplay, stopMicReplay, loudnessLevel, isPlaying } = useMicrophoneService();
const { startMicReplay, stopMicReplay, loudnessLevel, isPlaying } = useMicrophoneService(message);
</script>
<template>
<div>
<c-card>
<div class="control-buttons">
<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>
<c-button :disabled="isPlaying" @click="startMicReplay">
{{ t('tools.mic-tester.start-button-text') }}
</c-button>
<c-button :disabled="!isPlaying" @click="stopMicReplay">
{{ t('tools.mic-tester.stop-button-text') }}
</c-button>
</div>
<!-- Loudness Meter -->
<div id="loudnessMeter">
<div id="loudnessBar" :style="{ width: loudnessLevel + '%' }">
</div>
<div id="loudnessMeter">
<div id="loudnessBar" :style="{ width: `${loudnessLevel}%` }" />
</div>
</c-card>
</div>