UlmDesign JS Resource

Tutorial (123)


Text To Speech Api HTML5 – Android

New useful function bridge between HTML5 and Android to listen text from input textarea

package com.example.tts;
// here imports in Eclipse command "Source->Organize Imports"
.......
@SuppressLint({ "SetJavaScriptEnabled", "JavascriptInterface" })
public class MainActivity extends Activity implements OnInitListener {
       private TextToSpeech tts;
       private WebView ttsweb;
        @Override
   public void onConfigurationChanged(Configuration newConfig){
	    super.onConfigurationChanged(newConfig);
	}
	@SuppressWarnings("deprecation")
   protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);	
	setContentView(R.layout.activity_main);
        tts = new TextToSpeech(this, this);
        ttsweb = (WebView) findViewById(R.id.webtweetsfeeds);
        ttsweb.getSettings().setJavaScriptEnabled(true);
	ttsweb.getSettings().setLoadWithOverviewMode(false);
	ttsweb.getSettings().setUseWideViewPort(false);
	ttsweb.getSettings().setBuiltInZoomControls(false);
	ttsweb.getSettings().setPluginState(WebSettings.PluginState.ON);
	ttsweb.getSettings().setRenderPriority(RenderPriority.HIGH);
	ttsweb.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        ttsweb.setWebChromeClient(new WebViewChromeClient());
        ttsweb.setWebViewClient(new WebViewClient());
        // bridge interface java/javascript
        ttsweb.addJavascriptInterface(new WebAppInterface(this), "Android");
	ttsweb.loadUrl("file:///android_asset/www/index.html");
   }
  final class WebAppInterface {
	    Context mContext;
	   /*My interface*/
	    /** Instantiate the interface and set the context */
	    WebAppInterface(Context c) {
	        mContext = c;
	    }
	    public void ttsInput(String inputText, String setLang){
	    	tts.setLanguage(new Locale(setLang));
	    	Toast.makeText(getApplicationContext(), tts.toString(), 
	    		      Toast.LENGTH_SHORT).show();
	    	tts.speak(inputText, TextToSpeech.QUEUE_FLUSH, null);	    	
	    }
	    public void ttsStop(){
	    	if (tts != null) {
	            tts.stop();
	           // tts.shutdown();
	        }	
	    }
	   	    
	}
       public void onInit(int status) {
		// TODO Auto-generated method stub
		return;
	}
}
// Now open html file index in asset/www main folder project Android and to add this code:
// javascript functions 
function tts(){
	try{
		var ttsinout = document.getElementById("textarea").value;
		var setLanguage = document.getElementById("setlanguage").value;
		Android.ttsInput(ttfeeds, setLanguage);
	} catch(e){
		alert("Error Description: " + e.message);
	}
}

function stoptts(){
	try{
		Android.ttsStop();
	} catch(e){
		alert("Error Description: " + e.message);
	}
}
document.getElementById("ttstop").addEventListener("click", stoptts, false);
document.getElementById("tts").addEventListener("click", tts, false);
// end javascript

// start html


Search Page Javascript


//open html file and insert this items


Text To Speech in pure js

Text To Speech in pure javascript


Add Javascript Interface Android Write File

A useful snippet HTML5 hybrid app for Android, using the method addJavascriptInterface to save and write file in external storage:

// write storage permission in your manifest file of Android project

    
    ...


// start code
@SuppressLint({"SetJavaScriptEnabled","JavascriptInterface"})
public class MainActivity extends Activity {
public WebView webView;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main); // source activity_main.xml
webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
webView.setWebViewClient(new WebViewClient());
// important set Web Chrome Client
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl(url); //local or remote
}
// final class for save and write file in external storage
final class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }
        public void writeToFile(String data, String filename, String tag) {
            try {
                File root = android.os.Environment.getExternalStorageDirectory();
                File dir = new File (root.getAbsolutePath() + "/foldercustom");
                dir.mkdirs();
                File file = new File(dir, filename);
                FileOutputStream f = new FileOutputStream(file);
                PrintWriter pw = new PrintWriter(f);
                pw.println(data);
                pw.flush();
                pw.close();
                f.close();
            }
            catch (IOException e) {
                Log.e(tag, "File write failed: " + e.toString());
            }
        }
    }

}
// Now open html file in www folder


Undoredo pure js

var undoStack = [], 
redoStack = [],
areaeditor,
undoBtn,
redoBtn;
function undoRedoButtonControl() {
    undoBtn.style.color = undoStack.length > 0 ? "black" : "gray";
    redoBtn.style.color = redoStack.length > 0 ? "black" : "gray";
}
function undo_push(a) {
    var b = undoStack.pop();
    undoStack.push(b);
    b !== a && undoStack.push(a);
    undoRedoButtonControl();
}

function redo_push(a) {
    redoStack.push(a);
    undoRedoButtonControl();
}

function undo_pop() {
    if (undoStack.length > 0) {
        redo_push(areaeditor.value);
        areaeditor.value = undoStack.pop();
        undoRedoButtonControl();       
    }
}

function redo_pop() {
    if (redoStack.length > 0) {
        undo_push(areaeditor.value);
        areaeditor.value = redoStack.pop();
        undoRedoButtonControl();        
    }
}
function process_keystrokes() {
    undo_push(areaeditor.value);
    areaeditor.focus();
}

function process_paste() {
    undo_push(areaeditor.value);    
    areaeditor.focus();
}



UlmDesign JS Resource, 2020. Theme Material for Coders