I am trying to create a speech recognition enabled web application. I have successfully implemented the same and its working as expected on the desktop. But On mobile and tablet devices the onResult called twice and the second result is what i expected not the first. But because of this I couldn't get the result as I expected. Is anyone facing the same issue let me know.
I hope I have understood your issue, and by my understanding you seem to be having an issue with extracting web-speech recognition results correctly on mobile devices.
The native speech recognition, most notably, chrome/android browsers on Android, handle speech recognition results slightly differently from their desktop versions. Recognition results where isFinal is true, are usually complete sentences, recognized by the mobile browsers, where as, for example, on desktop chrome, even words are returned with isFinal==true.
Here's a simplified version of what worked best for me.
var mobile=false;
if(/*Use preferred method to detect mobile device*/){
mobile=true;
}
Recognizer.onresult = function(event){
var interimTranscripts = '';
var finalTranscripts = '';
for(var i = event.resultIndex; i < event.results.length; i++){
var transcript = event.results[i][0].transcript;
if(event.results[i].isFinal){
if(mobile){ //if running on a mobile device
finalTranscripts = transcript;
}else{
finalTranscripts += transcript;
}
}else{
if(mobile){ //if running on a mobile device
interimTranscripts = transcript;
}else{
interimTranscripts += transcript;
}
}
}
if(finalTranscripts){
target.value = finalTranscripts; //the output
if(!mobile){
Recognition.stop();
}
}
else if(interimTranscripts){
target.value = interimTranscripts + finalTranscripts;
}
};
Related
i am currently implementing speech input on a website and using the web speech API for it.
voice recognition works as expected in Chrome on desktop and android. Firefox does not have support for the API so it is not being used there.
the problem is with chrome on iOS where the service throws a "service-not-allowed" error.
this error seems to be distinctly different from the "not-allowed" error that is being thrown when the browser does not have permission to use the microphone.
in my case chrome has all permissions it would need (microphone permission, pop-ups are not blocked).
at first i thought the problem was, that for some reason chrome on iOS does not show me the permission pop-up, specifically for microphone usage, directly on the web page, but now i am not so sure anymore.
does anyone have experience with this problem or have a solution for this?
here is the working code for android/desktop, the function gets triggered by a button click:
function startDictation() {
try {
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
} catch (e) {
console.log(e);
}
if (recognition) {
recognition.continuous = false;
recognition.interimResults = true;
recognition.lang = $('html').attr('lang');
recognition.start();
recognition.onresult = function(e) {
$('#searchInput').val(e.results[0][0].transcript);
console.log(e.results[0][0].transcript);
};
recognition.onerror = (e) => {
console.error('Speech recognition error detected: ' + e.error);
recognition.stop();
};
recognition.onend = () => {
console.log('Speech recognition service disconnected');
}
}
}
a few helpful links
web speech api error values
web speech api demo from google, that also doesn't work on iOS for me
i have tried various end devices at this point, two different iPads and an iPhone and the same error gets thrown everywhere.
any help is appreciated, thanks!
Hello guys i've been working on a website where i'm using Javascript text-to-speech API to play some text and it works great for web browsers but now the project is being ported to android and text-to-speech is not working on it at all.
android's web view is being used by the android developer to open the site in app
For porting from web to android, i have used Mobile detection library fro mobiledetect.net and so i can detect if it's android or not.
since i can detect "if mobile" i was wondering if there is actually a way to place some android code in onclick attribute when it's mobile which will then call android's text-to-speech API else JS function.
the function grabs plain text from a div and passes it to text-to-speech. i was wondering if same could happen using android where by detecting mobile i can place some android code in onclick attribute and android takes care of the rest.
-- here is a code of my javascript text-to-speech --
//area_id == div id with text.... btn_id = id of the button which is being clicked
function textToAudio(area_id, btn_id){
var amISpeaking = window.speechSynthesis.speaking;
if(amISpeaking){
var etext = $("#"+btn_id).html();
if(etext == "Play"){
window.speechSynthesis.resume();
$("#"+btn_id).html("Pause");
}else if(etext == "Pause"){
window.speechSynthesis.pause();
$("#"+btn_id).html("Play");
};
return false;
}else{
$("#"+btn_id).html("Pause");
};
/* playing souund */
var msg = $("#"+area_id).html();
msg = $.trim(msg);
if(empty_check(msg) || (msg == NO_VAL)){ msg = "Either there is no text or something went wrong during processing."; };
let speech = new SpeechSynthesisUtterance();
speech.lang = "en-US";
speech.text = msg;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;
window.speechSynthesis.speak(speech);
};
anyone have any ideas ?
So I am using the Web Audio API for PhoneGap project. It plays multiple sounds (amount decided by the user) simultaneously. The below code works very well on android. There is minimal lag; however, on iOS there is quite a bit of lag especially once amount gets to six or so. How would I be able to minimize this? I have tried using the PhoneGap Media API, but then there was a horrible amount of lag on Android.
var myAudio = [];
for (i = 0; i < amount; i++) { //I have taken out some code to make it more simple
myAudio[i] = new Audio(rand.path + ".mp3"); //rand is initialized before
}
for (i = 0; i < amount; i++) {
myAudio[i].play();
}
I´m developing a Windows 8.1 App for desktop using HTML and Javascript.
I have a video grabber card and i would like to view the video being captured in real-time at my App.
Searching the internet i´ve found some examples and tutorial of capturing video for a Windows 8 App, but all of them are with the webcam, and i would like to know if that should be applicable to any "capture device" like my capture card.
I´ve followed this MSDN tutorial with no success.
http://msdn.microsoft.com/en-us/library/windows/apps/hh452791.aspx
EDIT (adding some more info):
If you follow the tutorial, the detection of capture devices whith the code bellow is ok, it properly detects my capture card.
var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
// Add the devices to deviceList
if (devices.length > 0) {
for (var i = 0; i < devices.length; i++) {
deviceList.push(devices[i]);
}
initCaptureSettings();
initMediaCapture();
document.getElementById("message").innerHTML = "Initialization complete.";
} else {
document.getElementById("error").innerHTML("No video device is found ");
}
}, errorHandler);
But then, it throws an "Access denied" exception at the "oMediaCapture.initializeAsync(captureInitSettings)" at the following section of code:
// Create and initialze the MediaCapture object.
function initMediaCapture() {
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
createProfile();
}, errorHandler);
}
I think this could be because of some kind of access permission to the capture device ¿?¿?
Any help?
Thanks in advance!!
If you only care about the video and do not want to use the audio, just make sure that the settings passed to InitializeAsync() specifies StreamingCaptureMode correctly:
mediaCapture = new MediaCapture();
MediaCaptureInitializationSettings initSettings = new MediaCaptureInitializationSettings();
initSettings.VideoDeviceId = Webcam.Id;
initSettings.StreamingCaptureMode = StreamingCaptureMode.Video; // <----
await mediaCapture.InitializeAsync(initSettings);
Kudos to Slimacik.
I need to create the database in blackberry os 5.0 using javascript for phonegap application.
var mydb=false;
function onLoad() {
try {
if (!window.openDatabase) {
alert('not supported');
}
else {
var shortName = 'phonegap';
var version = '0.9.4';
var displayName = 'PhoneGap Test Database';
var maxSize = 65536; // in bytes
mydb = openDatabase(shortName, version, displayName, maxSize);
}
}
}
It is moving to if condition and only the alert is displayed.But the database is not getting created.Please tell me what's wrong in this code.
Thanks in advance!
You have your answer, no? If it's moving to the if and only the alert is being displayed, it's never going to go to the else and create the database, but there's a good reason for that. The if tests for support. Apparently, BlackBerry OS 5.0 doesn't support databases. You can check this page for a list of polyfills to support HTML5 features in less capable browsers.
BlackBerry 5 is not supported by PhoneGap's openDatabase API.
http://docs.phonegap.com/phonegap_storage_storage.md.html
Supported Platforms
Android
BlackBerry WebWorks (OS 6.0 and higher)
iPhone
HI Recently I had the same problem and I found a cool solution :D
BB5 have a "Google Gear" Iternaly in the browser to do that
if (window.openDatabase){
//HTML5
}else{
//try google GEARS
if (window.google || google.gears){
_DB = google.gears.factory.create('beta.database', '1.0');
_DB.open('MyLocalDB');
}
}