All geek questions in one place

Developing a simple voice web application using the web speech API

I am new to web development and I am trying to develop a simple voice web application using the Web Speech API. I used this simple tutorial to learn the basics of a voice program.

Here is the code that I wrote as a simple start.

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <script> var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.onresult = function(event) { alert("onresult even handler"); } function startButton(event) { recognition.start(); } </script> </head> <body> <div id = "text"> <button id="start_button" onclick="startButton(event)"> start </button> </div> </body> </html>

But when I open the html page in google chrome browser and click on start, this is what I see:

enter image description here

And when I click on the crossed camera icon, I see the following dropdown menu:

enter image description here

Even when I select "Ask if the file wants - wants to access your camera and microphone", and reload the page, it will repeat the same.

When I did more research on this, I found out that Google Chrome only allows a secure site (for example, https: //) to access your camera and microphone. If it is not https, then chrome blocks it without asking the user. But I can’t understand why my local file is blocked from using a microphone. Can anyone help me on this. Thanks in advance.

+4
source share
3 answers

You need to deploy the HTML project on the server. You can do this by deploying it to any localhost server.

HTML-related HTML files do not work properly if they are not deployed to the server.

+1
source

WebSpeechAPI only works for files processed through https: // or http: // NOT file: ///

You need a web server to which you have access to / where you store the files.

If you don't have a web server, you can use google sky as webserver / to host your index.html (name MUST be index.html) and all javascript and css: https://googledrive.com/host/0B716ywBKT84AMXBENXlnYmJISlE/GoogleDriveHosting. html

+1
source

I may have a solution for you:

1. Go to Chrome Chrome settings 2. Click advanced options
3. Click "Show advanced options."
4. In the "Privacy" section, click content options
5. Go to the multimedia section (next to the bottom) and click "Allow all sites to use the plugin on my computer"

Hope this helps!

If you need more help, check out this link for more information.

-1
source

Source: https://habr.com/ru/post/1491292/

More articles:


All Articles