diff --git a/03-codigotchi/index.html b/03-codigotchi/index.html index 198a23a..1b7894c 100644 --- a/03-codigotchi/index.html +++ b/03-codigotchi/index.html @@ -63,6 +63,9 @@

Supported Commands

+ +

+ diff --git a/03-codigotchi/script.js b/03-codigotchi/script.js index babaa99..4c5636b 100644 --- a/03-codigotchi/script.js +++ b/03-codigotchi/script.js @@ -1,10 +1,40 @@ // Query the page for elements const micBtn = document.getElementById('microphone') -const panelsData = document.getElementById('panels-data'); +const panelsData = document.getElementById('panels-data') +const transcript = document.getElementById('transcript') + +// Set a default SpeechRecognition browser library to use +const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition + +// Build the speech recognition library +const recognition = new SpeechRecognition() // When button clicked, show the available commands function onStartListening() { + // Start listening to the microphone + recognition.start() + + // Show the available commands panelsData.classList.add('listening') } -micBtn.addEventListener('click', onStartListening) \ No newline at end of file +// When finished speaking, run this function +function onResult(event) { + // Hide the available commands + panelsData.classList.remove('listening') + + // Get the words we spoke + const text = event.results[0][0].transcript + + // Add what we spoke to the transcript HTML element for visibility + transcript.textContent = `You said: ${text}` +} + +// If anything goes wrong (it shouldn't), let us know in the console +function onError(event) { + console.error(event.error) +} + +micBtn.addEventListener('click', onStartListening) +recognition.addEventListener('result', onResult) +recognition.addEventListener('error', onError) \ No newline at end of file