JS text to speech to android web view text to speech - javascript

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 ?

Related

speech recognition onresult called twice on mobile and tablet deveices

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;
}
};

Embedded site on Android checking does site is open by Application or Browser

I build a new website then i build a new application for Android and embedded my site it into the application.
With the script below, I can understand that the user is entering to the site by mobile or desktop.
document.addEventListener('DOMContentLoaded', function() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
document.getElementsByClassName('banner')[0].innerHTML = 'html';
}
}, false);
I want mobile users to download the app. With the script above i am forming html that gives link to mobile user to install my app.
Problem is that inserted html is shown by application at the same time.
How can i detect when the site is open by application ?
To detect whether the site is being opened by a browser or the Android application use one of the following methods.
1st Method
Use server side coding to check for a request header.
PHP:
if ($_SERVER['HTTP_X_REQUESTED_WITH'] == "your.android.app.package.name") {
//webview
} else {
//browser
}
JSP:
if ("your.android.app.package.name".equals(req.getHeader("X-Requested-With")) ){
//webview
} else {
//browser
}
2nd Method
Bind javascript code to android code and call it.
Use the #JavascriptInterface annotation on any method that you want available to your JavaScript.
#JavascriptInterface
public void runningOnAndroid() {
androidApp = true;
}
You can find the details here

Video capture for Windows 8 desktop App (HTML + javascript). Not from webcam

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.

On a android phone,when visit market:// download url ,got "Unable to load the webpage"

Android market URLs on the form market://details?id... can be used to launch the Google Play app, and download other apps.But when using an Android device which didn't come with the Google Play app, or on which it has been deleted, trying to open a market:// ... URL results in "unable to load the page".
Is there any way to detect the absence of the Google Play app using javascript, in order to suggest to the user that he/she installs the Google Play app, rather than showing a generic error message?
Sorry,didn't say it clearly, I am using "market://.." url download in a web page,not a native android app,so the answer of Raghav Sood is not what I want,thanks all the same.
You can use this to check if Google Play is installed by attempting to launch it with a dummy intent:
public boolean hasGooglePlayInstalled() {
Intent market = new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=dummy"));
PackageManager manager = mContext.getPackageManager();
List<ResolveInfo> list = manager.queryIntentActivities(market, 0);
if (list != null && list.size() > 0) {
for (int i = 0; i < list.size(); i++) {
if (list.get(i).activityInfo.packageName.startsWith("com.android.vending") == true) {
return true;
}
}
}
return false;
}
Just use it in your code as:
if(hasGooglePlayInstalled()) {
//Open Google Play
} else {
//Open browser/show message
}

Determine an installed app using Safari on iPhone

I would like to determine an installed app using custom URL scheme on iPhone Safari.
You may believe it is impossible to do this, but JavaScript helped me to figure this out.
<script>(function(){
var fallbackLink = '<?=$info['failed_url']?>'+window.location.search+window.location.hash;
var isiOS = navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone'),
isAndroid = navigator.userAgent.match('Android');
if (isiOS || isAndroid) {
document.getElementById('loader').src = '<?=$info['scheme']?>://'+window.location.search+window.location.hash;
fallbackLink = isAndroid ? '<?=$info['failed_url']?>' :
'<?=$info['failed_url']?>' ;
}
window.setTimeout(function (){ window.location.replace(fallbackLink); }, 1000);
})();</script>
here is my script.
I already know custom URL scheme of the iPhone application. It successfully launches the application if it exists on the iPhone. However, if the iPhone doesn't have the application, it redirects to a different page.
I put certain code on the failed web page to notice that user doesn't have the application. My plan was perfect until I found this.
The JavaScript redirection works even though the application is launched on iPhone after timeout.
Is there a way to stop JavaScript if iPhone launched application?
Thank you.
You can always cancel the timeout when the window loses focus.
var countdown = window.setTimeout(function (){
window.location.replace(fallbackLink);
}, 1000);
window.addEventListener("blur", function (){
window.clearTimeout(countdown);
}, false);

Categories