Record your voice to analyze pronunciation and confidence levels.
00:00
Analysis Results
Pronunciation Accuracy
0%
Confidence Level
0%
Fluency
0%
Clarity
0%
`;
this.recordBtn = this.shadowRoot.getElementById('recordBtn');
this.analyzeBtn = this.shadowRoot.getElementById('analyzeBtn');
this.timer = this.shadowRoot.getElementById('timer');
this.results = this.shadowRoot.getElementById('results');
this.setupEventListeners();
}
setupEventListeners() {
this.recordBtn.addEventListener('click', () => {
if (this.recording) {
this.stopRecording();
} else {
this.startRecording();
}
});
this.analyzeBtn.addEventListener('click', () => {
this.analyzeRecording();
});
}
async startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
this.mediaRecorder = new MediaRecorder(stream);
this.audioChunks = [];
this.mediaRecorder.ondataavailable = event => {
this.audioChunks.push(event.data);
};
this.mediaRecorder.onstop = () => {
this.recording = false;
this.recordBtn.classList.remove('recording');
this.analyzeBtn.disabled = false;
clearInterval(this.timerInterval);
};
this.mediaRecorder.start();
this.recording = true;
this.recordBtn.classList.add('recording');
this.analyzeBtn.disabled = true;
this.results.style.display = 'none';
// Start timer
let seconds = 0;
this.timerInterval = setInterval(() => {
seconds++;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
this.timer.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}, 1000);
} catch (error) {
console.error('Error accessing microphone:', error);
alert('Could not access microphone. Please check permissions.');
}
}
stopRecording() {
if (this.mediaRecorder && this.recording) {
this.mediaRecorder.stop();
this.recording = false;
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
}
}
async analyzeRecording() {
if (this.audioChunks.length === 0) return;
this.analyzeBtn.disabled = true;
this.analyzeBtn.innerHTML = '