mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-05-06 22:37: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
};
}

115
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="loudnessMeter">
<div id="loudnessBar" :style="{ width: loudnessLevel + '%' }">
</div>
</div>
</c-card>
</div>
@ -101,21 +25,20 @@ onBeforeUnmount(() => {
<style scoped>
#loudnessMeter {
width: 100%;
height: 30px;
background-color: rgba(46, 51, 56, 0.05);
margin-top: 20px;
position: relative;
width: 100%;
height: 30px;
background-color: rgba(46, 51, 56, 0.05);
margin-top: 20px;
position: relative;
}
#loudnessBar {
height: 100%;
background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
height: 100%;
background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
}
.control-buttons {
display: flex;
gap: 10px;
margin-bottom: 20px;
justify-content: space-between;
display: flex;
gap: 10px;
margin-bottom: 20px;
justify-content: space-between;
}
</style>