I have the following piece of code that has two textareas and two buttons. Each button controls its own text area. Once started, the script listen to the audio and when finished fills the textarea with the transcription of the audio listened. The problem is: every time the button is clicked, Google Chrome asks for permission to use the microphone. Is there a way to make this request happen only once?
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transcrição de Áudio</title>
<style>
textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<textarea id="transcription1" placeholder="A transcrição aparecerá aqui"></textarea>
<button id="startStopBtn1">Iniciar/Parar Transcrição 1</button>
<textarea id="transcription2" placeholder="A transcrição aparecerá aqui"></textarea>
<button id="startStopBtn2">Iniciar/Parar Transcrição 2</button>
<script>
let isRecording1 = false;
let isRecording2 = false;
let recognition1;
let recognition2;
let silenceTimer1;
let silenceTimer2;
let hasPermission1 = false;
let hasPermission2 = false;
const startStopBtn1 = document.getElementById('startStopBtn1');
const transcriptionInput1 = document.getElementById('transcription1');
const startStopBtn2 = document.getElementById('startStopBtn2');
const transcriptionInput2 = document.getElementById('transcription2');
// Função para inicializar o reconhecimento de fala
function initRecognition(recognition, transcriptionInput, silenceTimer) {
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'pt-BR';
recognition.onresult = (event) => {
clearTimeout(silenceTimer);
let interimTranscript = '';
for (let i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
transcriptionInput.value += event.results[i][0].transcript + 'n';
} else {
interimTranscript += event.results[i][0].transcript;
}
}
};
recognition.onspeechend = () => {
resetSilenceTimer(recognition, silenceTimer);
};
recognition.onerror = (event) => {
console.error('Erro no reconhecimento de fala:', event.error);
stopRecording(recognition, silenceTimer);
};
return recognition;
}
// Inicializar reconhecimento de fala ao clicar no botão pela primeira vez
startStopBtn1.addEventListener('click', () => {
if (!hasPermission1) {
hasPermission1 = true;
recognition1 = initRecognition(recognition1, transcriptionInput1, silenceTimer1);
}
toggleRecording(recognition1, startStopBtn1, transcriptionInput1, silenceTimer1, isRecording1);
});
startStopBtn2.addEventListener('click', () => {
if (!hasPermission2) {
hasPermission2 = true;
recognition2 = initRecognition(recognition2, transcriptionInput2, silenceTimer2);
}
toggleRecording(recognition2, startStopBtn2, transcriptionInput2, silenceTimer2, isRecording2);
});
function toggleRecording(recognition, button, transcriptionInput, silenceTimer, isRecording) {
if (isRecording) {
stopRecording(recognition, silenceTimer);
button.textContent = "Iniciar Transcrição";
} else {
startRecording(recognition, button, transcriptionInput, silenceTimer);
button.textContent = "Parar Transcrição";
}
isRecording = !isRecording;
}
function startRecording(recognition, button, transcriptionInput, silenceTimer) {
recognition.start();
resetSilenceTimer(recognition, silenceTimer);
}
function stopRecording(recognition, silenceTimer) {
recognition.stop();
clearTimeout(silenceTimer);
}
function resetSilenceTimer(recognition, silenceTimer) {
clearTimeout(silenceTimer);
silenceTimer = setTimeout(() => {
stopRecording(recognition, silenceTimer);
}, 5000);
}
</script>
</body>
</html>
I have no idea on how to deal with that problem. I’d like to allow only once and somehow keep the permission valid