Giving Voice to the bot With The SpeechSynthesis Interface:<\/strong><\/h3>\n\n\n\nCreate a function to generate a synthetic voice. This time, we are using the SpeechSynthesis controller interface of the Web Speech API.<\/p>\n\n\n\n
The function takes a string as an argument and enables the browser to speak the text:<\/p>\n\n\n\n
function synthVoice(text) {\n const synth = window.speechSynthesis;\n const utterance = new SpeechSynthesisUtterance();\n utterance.text = text;\n synth.speak(utterance);\n }\n<\/pre>\n\n\n\nIn the function, first, create a reference to the API entry point, window.speechSynthesis. You might notice that there is no prefixed property this time: This API is more widely supported than SpeechRecognition, and all browsers that support it have already dropped the prefix for SpeechSysthesis.<\/p>\n\n\n\n
Then, create a new SpeechSynthesisUtterance() instance using its constructor, and set the text that will be synthesised when the utterance is spoken. You can set other properties, such as voice to choose the type of the voices that the browser and operating system should support.<\/p>\n\n\n\n
Finally, use the SpeechSynthesis.speak() to let it speak!<\/p>\n\n\n\n
Now, get the response from the server using Socket.IO again. Once the message is received, call the function.<\/p>\n\n\n\n
'use strict';\n\n const socket = io();\n \n const outputYou = document.querySelector('.output-you');\n const outputBot = document.querySelector('.output-bot');\n \n const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n const recognition = new SpeechRecognition();\n \n recognition.lang = 'en-US';\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n \n document.querySelector('button').addEventListener('click', () => {\n recognition.start();\n });\n \n recognition.addEventListener('speechstart', () => {\n console.log('Speech has been detected.');\n });\n \n recognition.addEventListener('result', (e) => {\n console.log('Result has been detected.');\n \n let last = e.results.length - 1;\n let text = e.results[last][0].transcript;\n \n outputYou.textContent = text;\n console.log('Confidence: ' + e.results[0][0].confidence);\n \n socket.emit('chat message', text);\n });\n \n recognition.addEventListener('speechend', () => {\n recognition.stop();\n });\n \n recognition.addEventListener('error', (e) => {\n outputBot.textContent = 'Error: ' + e.error;\n });\n \n function synthVoice(text) {\n const synth = window.speechSynthesis;\n const utterance = new SpeechSynthesisUtterance();\n utterance.text = text;\n synth.speak(utterance);\n }\n \n socket.on('bot reply', function(replyText) {\n synthVoice(replyText);\n \n if(replyText == '') replyText = '(No answer...)';\n outputBot.textContent = replyText;\n });\n<\/pre>\n\n\n\nIt's done.Run the following command in your terminal.<\/p>\n\n\n\n
$ node index.js<\/em><\/p>\n\n\n\nAnd search localhost:3000 in any supported browser.<\/p>\n\n\n\n
You can refer to my repository for further help.<\/p>\n\n\n\n