I recently developed a code for "speech to text" functionality, which includes an input type text field. However, when I speak to my computer, the words are not being entered into the input field. Why is this happening? I specifically want the word "Hello" to appear in this bar! Please refer to the image below for clarification:
Not sure of the method used, but it seems to be effective
This implementation utilizes the SpeechRecognition function from Web Speech API (visit)->https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
Keep in mind its cross-browser compatibility(verified on Chrome) - may not work on Firefox as per my knowledge -> please check and confirm
It includes a predefined list of colors where the recognized speech is input into a text field (you may have a different list or none at all)
The example code is extracted from the mentioned link
var color = "aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow";
var colorArray = color.split(" | ");
for (i = 0; i <= colorArray.length; i++) {
$("ul").append("<li>" + colorArray[i] + "</li>");
}
var SpeechRecognition = window.webkitSpeechRecognition;
var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + color + ";";
var recognition = new SpeechRecognition();
var speechRecognitionList = new webkitSpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
var bg = document.querySelector('html');
document.body.onclick = function() {
recognition.start();
console.log('Ready to receive a color command.');
}
recognition.onresult = function(event) {
var color = event.results[0][0].transcript;
$("input").val(color);
bg.style.backgroundColor = color;
}<h1 class="output">Click Here to speak</h1>
<input type="text">
<br>
<h4>List of colors</h4>
<ul>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>Note that this code may not run correctly here -> try running it elsewhere (requires microphone permission)
Hope you find this information helpful
Struggling with an issue related to displaying a logo in a sticky header. The menu works, but need the logo to shrink when header is sticky. https://i.sstatic.net/jDNsb.png This is what I need: https://i.sstatic.net/szzRC.png My current code snippet: ...
I am trying to implement a "See more" and "See less" button functionality for my list items inside an unordered list using the code below, but it is not working as intended. $(document).ready(function() { var list = $(".partners__ul li"); var numTo ...
I've been working on creating a variable that stores its value across multiple pages using local storage. However, I've encountered an issue where the variable is not being saved, and there are no error messages to help diagnose the problem. Her ...
Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...
I am having trouble getting multiple rows to work inside the Antd Submenu. When I select only one row, it works fine. However, when I try to select multiple rows, the ellipsis is not shown at all and the text remains in one row. <SubMenu ...
When utilizing React and Material UI, my goal is to efficiently apply styles to a group of ToggleButtons. At the moment, I am only able to specify the style prop for each individual ToggleButton in order to achieve the desired styling. I am attempting to ...
I am facing an issue where everything on my website works perfectly, except when I visit /treatments/manage_your_skin.php Once I navigate to that page and try to return to the homepage, it shows an error. This is because my website is searching for /treat ...
I'm attempting to dynamically add TextBoxes controls based on items in my database. Below is the asp:PlaceHolder snippet from my .aspx page: <asp:PlaceHolder ID="PlaceHolderHTML" runat="server"></asp:PlaceHolder> From my C# code, I am ge ...
I am currently developing a Browser Helper Object (BHO) for Internet Explorer that involves searching for specific words on a web page and encasing those words in an HTML tag for styling purposes. While I have code in place that allows me to change the st ...
Is there an option to display a flag icon? For example, I am able to write Hello ...
Recently, I encountered an issue with my navbar after switching to v4 alpha 6 in order to utilize the responsive utilities that this version offered. If you visit the following page: , you will see what I mean. Prior to upgrading to v4 alpha 6, all menu ...
Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...
I have a task at hand where I need to display a list of profiles related to each user in a single cell with multiple rows within my gridview. How can I achieve this? This is what I have attempted: <asp:BoundField DataField="UserName" HeaderText ...
I'm attempting to create a dropdown menu similar to the one in Gmail using Bootstrap. https://i.sstatic.net/K1NCg.png However, I have encountered 2 issues: 1- I am unable to click on the input checkbox to select all 2 - I would like it so that if ...
I am trying to load an HTML page using an object tag, and once the page is fully downloaded, I want to display something. I have attempted the following approach, but it is not working: document.querySelector(".obj_excel").addEventListener("load", funct ...
I am looking to display specific user information using a $_session variable. Currently, I have it working with a table format but I want to avoid using a table and instead use a CSS div. However, when I tested this, I encountered an error message saying " ...
I'm looking to update the icon on a button when it is clicked. It would be helpful to know if I can also add an animation to the icon after the button click. ...
We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...
When it comes to styling the layout of a page, Foundation 4's grid system with its mobile-first approach is a no-brainer, especially if you're already using other foundation elements like textual content, images, and sidebars. On the example pag ...
As I develop an application in Python, one of the features requires printing PDF files using a Xerox printer. I am currently considering two options: First option: figuring out a way to communicate with the printer driver and send commands to the printer ...