JavaScript 通过 WebView 调用 Android Text to Speech API

在开发一个英汉译音词典应用时,遇到了在JavaScript中使用WebView朗读单词的问题。虽然桌面浏览器可以利用语音合成功能,但当应用在Android的WebView中运行时,无法直接发音。为解决此问题,采用了通过WebView接口调用Android的Text to Speech API来实现发音功能。

跟随虾哥项目实践,硬件选小智就对了

xiaozhi 开源方案官方适配,二次开发文档齐全

最近用JAVASCRIPT做了一个英汉译音词典,其中有个朗读单词的功能,在桌面端网页浏览器中可以使用语音合成类实现,JAVASCRIPT代码如下,但是由于想将应用提供给安卓应用用户使用,但是采用Android WebView和JavaScript混合编程时,所显示的网页应用无法直接发音,也无法直接调用类似桌面网页浏览器的TTS功能,所以只好写个接口调用Android的Text to Speech API。


这个是桌面浏览器使用的语音合成程序,该程序不能在安卓WebView内使用。

function speak(textToSpeak) {
    // 创建一个SpeechSynthesisUtterance实例
    var newUtterance = new SpeechSynthesisUtterance();
    // 设置要发音的内容
    newUtterance.text = textToSpeak;
    // 添加在发音队列中
    window.speechSynthesis.speak(newUtterance);
}

要在安卓系统中调用TTS,先写个类:

public class MyTtsTalker implements TextToSpeech.OnInitListener {

        private TextToSpeech tts;
        private boolean ttsOk;

        // The constructor will create a TextToSpeech instance.
        MyTtsTalker(Context context) {
            tts = new TextToSpeech(context, this);
            tts.setLanguage(Locale.UK);
        }

        @Override
        // OnInitListener method to receive the TTS engine status
        public void onInit(int status) {
            if (status == TextToSpeech.SUCCESS) {
                ttsOk = true;
            }
            else {
                ttsOk = false;
            }
        }

        // A method to speak something
        @SuppressWarnings("deprecation") // Support older API levels too.
        public void speak(String text, Boolean override) {
            if (ttsOk) {
                if (override) {
                    tts.speak(text, TextToSpeech.QUEUE_FLUSH, null);
                }
                else {
                    tts.speak(text, TextToSpeech.QUEUE_ADD, null);
                }
            }
        }
    }
然后再写个接口供WebView使用:

private class EQECORE{
        //语音朗读
        MyTtsTalker talker=new MyTtsTalker(MainActivity.this);
        @JavascriptInterface
        public void speak(String word){
            talker.speak(word, true);
        }
}

之后在Activity中调用:

webview = (WebView) findViewById(R.id.webView);
        //设置WebView属性,能够执行Javascript脚本
        webview.getSettings().setJavaScriptEnabled(true);

        //添加JS接口
        EQECORE eqeCore=new EQECORE();
        webview.addJavascriptInterface(eqeCore, "Core");

        //加载需要显示的网页
        String url_asset= "file:///android_asset/HOMOPHONE.html";
        webview.loadUrl(url_asset);

        //设置Web视图
        webview.setWebViewClient(new MyWebViewClient());


最后还需要在WebView加载的网页中写入相应的调用JavaScript:

Core.speak("say something");

测试可行。

跟随虾哥项目实践,硬件选小智就对了

xiaozhi 开源方案官方适配,二次开发文档齐全

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值