Greetins,
I am currently trying to implement a speech recognition functionality on my application. According to the JS documentation here, speech to text is supported since Safari 14.1. Also, I am using the following configurations:
const { webkitSpeechRecognition } = (window as any)
const recognition = new webkitSpeechRecognition();
recognition.lang = 'pt-BR';
recognition.continuous = true;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
// Avoid garbage collection bugs
this.garbage.push(recognition);
recognition.start();
On Chrome it works just fine, but on Safari the recognition results are super bad. It can understand me sometimes, but often it misinterprets my words, giving me wrong results. For example, if I say: "Hello assistant, change contrast", the result might be something like: "Hello assist charge contract hello assist charge charge" or something.
One peculiarity of this problem is that the events fired by the speech recognition interface on safari are just the start and audiostart.
Is anyone facing a similar issue or found a solution to this problem? I am also accepting alternatives for implementing speech recognition on my application.
Thanks in advance!
EDIT
On my end, you can see this problem by visiting any website that relies on the Web Speech API. Some examples that you can check:
https://www.google.com/chrome/demos/speech.html
https://www.audero.it/demo/web-speech-api-demo.html
So, if anyone else stumbles at this problem, I have filled an issue at the chromium forum. You can consult the issue here.
Basically, the Chrome team is having some problems integrating this functionality in their browser on iOS devices.
In my case, what I did was use Hark.js to get events based on when the user starts and stops speaking paired with Vosk on my backend to do the offline Speech-to-Text translation.
IMO the browser speech recognition API is fine if you want your app to run on a specific browser. However, if you wish to target all browsers accross different operational systems, I would advise looking for a different solution.
Related
I have code that is intended to measure device motion on a mobile device, and it used to work in mobile browsers, but no longer does. Here's an example taken directly from the Mozilla web docs:
function handleMotionEvent(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
// Do something awesome.
}
window.addEventListener("devicemotion", handleMotionEvent, true);
As far as I can tell, code like this no longer works in a mobile browser (circa Aug 2019).
Why? What needs to be done?
After spending time trying to debug my own code, I discovered that the many examples/demos/testers available on the web also no longer work, eg:
http://www.gianpa.com/shake/
http://www.albertosarullo.com/demos/accelerometer/
It seems that this is related to some changes in modern browsers/permissions/etc, perhaps related to recently revealed security issues related to accelerometer access, and steps being taken by Apple and Google as a result, eg:
https://www.macrumors.com/2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/
What I found is that neither a recent Android phone running up to date Chrome nor a relatively recent iOS phone running Safari seem to allow webapp access to the motion sensors anymore. However, when I load the same demo code (eg from the above demo websites) on an older Android device... it works fine as it used to.
What needs to be done to access motion data within a webapp?
Thank you
Apparently it is now required to serve and access a website/webapp using https:// for it to be able to use the motion sensors. I accessed the same URL above that didn't provide any sensor data using http://, and it did work using https://
If you have an older version of Chrome 63, please enable the chrome://flags/#enable-generic-sensor flag.
If you are using environmental sensors, such as, Magnetometer or AmbientLightSensor, please also enable chrome://flags/#enable-generic-sensor-extra-classes flag.
Reference:
https://intel.github.io/generic-sensor-demos/
I am looking to obtain the bluetooth strength (RSSI or similar) of a signal using a web-based application (in this case attempting with the Web-Bluetooth API). From what I've seen this feature is not supported in a browser (yet at least).
The result was intended to be used on a mobile device rather than a desktop but if there is a solution for either I am unaware at the current minute. Since I cannot see much on the matter of it other than it working within downloaded/compiled mobile apps (which I guess I will have to resort to if this is completely unachievable).
This would also apply to if HTML5 p2p connection strength if that was an obtainable value as well.
Maybe I have completely missed something out and my googling skills are terrible, otherwise any relevant links / information is appreciated :)
I recently implemented the watchAdvertisements() API that will enable the page to listen for advertisement packets from the device. When a packet is received, an advertisementreceived Event is fired on the device, and the Event contains the RSSI and TX Power of the device. You can give this API a try by enabling chrome://flags/#enable-experimental-web-platform-features in Chrome 85.0.4165 or higher.
I'm looking for a voice control script for my website (it's like an app) working offline running on localhost with no internet access. I used talater.com/annyang, it super simple to use and works perfectly, but needs internet access to work. My question is: Do you know any voice control scripts that I can use offline (localhost, no internet access)? Thanks!
Firstly, this isn't the right place for such a question. Secondly, it's already been asked here: Software Recommendations/StackExchange
There they suggested PocketSphinx JS. Also, some browsers now have a Web Speech API which you could implement or if you have Node.js at your disposal then there's a number of speech recognition packages (first brief npm search gave me this one: Speech Tree).
I've tried many different types of Javascript code, and I've changed my microphone settings in Windows and in Chrome's settings, and nothing has worked. I've tried enabling "Web Audio Input" in chrome://flags but nothing works, at all. Does anyone have any suggestions? Camera access works and I can easily do HTML5 camera manipulation but any microphone tasks don't work.
The following JSFiddle doesn't work on my browser: http://jsfiddle.net/BWYu9/3/
Give it a shot in the Canary build of Chrome. I think the ability to do this with an audio stream is pretty new - although for some reason I can't find a link to the Chromium issue.
You can try with Chrome Canary or perform the following steps:
open google.com
speak on microphone
if the answer is "cannot recognize speech it might be that your microphone is not recognized. (this will help to identify the source of the problem)
See the following link for this issue:
https://code.google.com/p/chromium/issues/detail?id=226327
I have found that many different problems can accrue with the microphone in the Google search window of chrome. The main problem I have found to be the most upsetting is after a Java up date I find it not working, but everything appears to be working fine with all my audio settings. My microphone levels are good in sound properties a for Google voice and video chat. but in the search bar of Google chrome the thing is still not working to solve the problem I discovered that resetting my Integrated Microphone Array to default had been canceled and after resitting it again to default this go the microphone to work.
Question:
Is it possible, with some sort of technology, to integrate voice recording into a mobile web application?
Some background:
I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going.
Voice Recording Requirements:
1. Must work with both iOS and Android.
2. Must work in most current versions of Firefox, Google Chrome, Internet Explorer, Opera, and Safari.
3. Must work within the framework of a mobile web application.
4. Must be able to record without being actively connected to the internet.
5. The client application shouldn't require the user to alter their phone OS.
I tried to be as specific as possible to assist in allowing you to answer this question accurately. If anything is unclear, just let me know in a comment below, and I will further clarify.
Check this http://www.html5rocks.com/en/tutorials/getusermedia/intro/
HTML Media Capture <input type="file">
Work for most of the mobile browsers, but it works not well because it will require native recording app and needs to active manually.
getUserMedia() and WebRTC
So far, only the Chromium support it well in mobile.
So, I gave up the web app. Hybrid app is the solution.
If you want to try the hybrid app for recording, you can check the Cordova Plugin https://github.com/emj365/cordova-plugin-audio-recorder-api that I created for recording task in the hybrid app.
It looks like in the years since asking this question a solution has surfaced. This solution has come in the form of MediaStreamConstraints dictionary audio property.
The Web API docs from Mozilla have a very nice example shown below:
document.getElementById("startButton").addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
audio: true
}).then(stream => audioElement.srcObject = stream)
.catch(err => log(err.name + ": " + err.message));
}, false);
Resources
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints/audio
If you want to record it as an audio, I think you can only make it for Chrome dev, Chrome canary, Opera next, and some mobile browser.
Using the WebRTC getUserMedia() API then make the blob URL of the audio data URL to save it.
If you want to record it as text maybe you can use <input -x-webkit-speech/> for webkit browsers. Make an event that make every-time it stop recording it'll add the currently recorded speech to an element and start recording again. Finally, make a blob URL to save it as a text file.