Search code examples
javascriptjavaandroidwebviewannyang

Using Annyang on Android WebView

I'm trying to use Annyang ( https://www.talater.com/annyang/ ) on my Android app.
Annyang works very well on my PC Chrome browser, even my mobile Chrome browser.
However, when I use Annyang on Android WebView, it shows an error to me -

"I/chromium: [INFO:CONSOLE(18)] "Uncaught TypeError: Cannot read property 'addCallback' of null", source: http://192.168.43.105/Annyang/annyang.html (18)"


I was wondering why Android WebView cannot read property 'addCallback', even my Annyang works well on my browser.
Please help me use Annyang on Android WebView!

The following is my code...
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="kr.kro.richvillage.annyangtest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission-sdk-23 android:name="android.permission.RECORD_AUDIO" />
    <uses-permission-sdk-23 android:name="android.permission.INTERNET" />

</manifest>

MainActivity.java

package kr.kro.richvillage.annyangtest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView mainPage;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mainPage = (WebView)findViewById(R.id.main_page);
        mainPage.getSettings().setJavaScriptEnabled(true);
        mainPage.setVerticalScrollBarEnabled(true);
        mainPage.setWebChromeClient(new WebChromeClient());
        mainPage.loadUrl("http://192.168.43.105/Annyang/annyang.html");
    }
}

annyang.html

<!DOCTYPE html>
<html>
<head>
    <title>Annyang API Test</title>
    <meta charset="utf-8" />
    <script src="annyang.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            annyang.addCallback('result', function(phrases) {
              console.log('Speech recognized. Possible sentences said:');
              console.log(phrases);
              console.log(phrases[0]);
            });
            annyang.setLanguage("ko");
            annyang.addCommands(commands);
            annyang.start();
        }
    </script>
</head>
<body>

</body>
</html>

Sorry for my bad English, thank you for reading my question!

Solution

  • Run into the same problem, seems like the Android WebView does not support the speech recognition API.

    Here is the Chromium Bug Ticket from 2015:

    https://bugs.chromium.org/p/chromium/issues/detail?id=487255