Implementasi Text To Speech dan Speech To Text di Android Studio

Text To Speech dan Speech To Text dapat memudahkan siapa saja yang kiranya sedang malas membaca atau menulis, dan tentunya akan sangat membantu bagi mereka yang memang hobi nya malas membaca atau menulis. Pada tutorial ini, kita akan membahas bagaimana cara implementasi kodingan untuk kedua pembantu tersebut di dalam pembuatan Aplikasi Android.

Pada contoh ini kita akan menggunakan sebuah komponen Edittext, sebuah Textview, dan 3 Imageview sebagai tombol-tombol nya. Untuk activity, hanya MainActivity saja dengan layout nya activity_main. Baik, disini saya membuat project baru dengan nama package com.gwnbs.ngomong. Mari kita mulai dengan membuat layoutnya, dan menempatkan semua komponen-komponen yang di butuhkan.

Agar terlihat sedikit menarik, kita akan membuat 2 buah background drawable terlebih dahulu yang di peruntukkan sebagai background dari 2 buah Linear Layout, yang akan mengandung komponen-komponen di atas. Klik kanan pada folder drawable > New > Drawable Resource File untuk membuat file drawable. Berikan nama untuk kedua background tersebut dengan, seperti tampak pada di bawah ini :

latar_kata.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <solid android:color="#5CACA1A1"/>
    <corners android:radius="20dp"/>

</shape>

latar_masukkan_kata.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">
    <solid android:color="#FFBEBEBE"/>
    <corners android:radius="20dp"/>

</shape>

Kedua file background diatas sebenarnya sama, hanya berbeda sedikit pada warna saja. Kita lanjut dengan penataan layout pada activity_main.xml. Disini kita akan memiliki Linear Layout orientasi vertical sebagai layout parent atau utama, kemudian 2 buah Linear Layout anak dengan orientasi horizontal. Tidak panjang lebar lagi, berikut isi keseluruhan :

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/latar_masukkan_kata"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingStart="8dp"
        android:paddingEnd="8dp">

        <EditText
            android:id="@+id/enterKata"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_weight="1"
            android:background="@null"
            android:fontFamily="serif"
            android:hint="Masukkan kata"
            android:imeOptions="actionDone"
            android:importantForAutofill="no"
            android:includeFontPadding="false"
            android:inputType="text"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/bicara"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="15dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_ngomong" />

        <ImageView
            android:id="@+id/okCoy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_ok" />

    </LinearLayout>

    <ImageView
        android:id="@+id/dengar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="30dp"
        android:layout_gravity="end"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_dengar"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/latar_kata"
        android:orientation="horizontal"
        android:paddingStart="8dp"
        android:paddingEnd="8dp">

        <TextView
            android:id="@+id/dapatkanKata"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:fontFamily="serif"
            android:textColor="#000000"
            android:padding="5dp"/>

    </LinearLayout>

</LinearLayout>

Terakhir MainActivity.java, pertama-tama dengan memvariabelkan objek-objek / komponen-komponen yang ada pada layout activity_main.xml, juga memvariabelkan objek TextToSpeech dan objek integer untuk posisi. Dan variabel tambahan objek animasi supaya tombol-tombol yang di klik memberikan efek.


Penjelasan selenjutnya bisa di lihat pada setiap metode-metode yang ada pada MainActivity.java di bawah ini. Untuk Speech To Text, bahasa nya tergantung pada penentuan bahasa sistem di perangkat, jika Anda menggunakan bahasa inggris di perangkat, maka ucapan Anda akan di deteksi berdasarkan bahasa tersebut. Begitu juga untuk bahasa-bahasa lainnya. Berikut isi selengkapnya MainActivity.java :

MainActivity.java :

import androidx.appcompat.app.AppCompatActivity;

import android.content.ActivityNotFoundException;
import android.content.Intent;
import android.os.Bundle;
import android.speech.RecognizerIntent;
import android.speech.tts.TextToSpeech;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    /* Variabel objek/komponen */
    EditText enterKata;
    ImageView bicara, dengar, okCoy;
    TextView dapatkanKata;
    TextToSpeech toSpeech;
    final int REQ_CODE = 1;
    AlphaAnimation click = new AlphaAnimation(1, 0.3F);

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

        /* Memanggil id-id dari komponen-komponen pada layout */
        enterKata = findViewById(R.id.enterKata);
        bicara = findViewById(R.id.bicara);
        dengar = findViewById(R.id.dengar);
        okCoy = findViewById(R.id.okCoy);
        dapatkanKata = findViewById(R.id.dapatkanKata);

        /* Metode klik untuk icon microphone dan penerapan intent dari speech to text */ 
        bicara.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
                intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, new Locale("in"));
                intent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Need to speak");
                try {
                    startActivityForResult(intent, REQ_CODE);
                } catch (ActivityNotFoundException a) {
                    toastM("Maaf! Perangkat Anda tidak mendukung!");
                }
            }
        });

        /* Metode klik dari icon centang, yang akan menghantarkan isi kata-kata yang ada di dalam edittext menjadi textview*/
        okCoy.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                dapatkanKata.setText(enterKata.getText().toString());
                toastM("Kata-kata di dapatkan!");
            }
        });

        /* Memanggil Text to Speech dan menentukan bahasa yang di inginkan */
        toSpeech = new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener() {
            @Override
            public void onInit(int status) {
                if (status != TextToSpeech.ERROR) {
                    toSpeech.setLanguage(new Locale("in"));
                }
            }
        });

        /* Metode klik dari icon speaker, dan menentukan kata-kata yang akan di ucapkan */ 
        dengar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.startAnimation(click);
                String speak = dapatkanKata.getText().toString();
                toSpeech.speak(speak, TextToSpeech.QUEUE_FLUSH, null);
            }
        });
    }

    /* Metode publik saat Text To Speech berhenti berbicara */
    public void onPause() {
        if (toSpeech != null) {
            toSpeech.stop();
            toSpeech.shutdown();
        }
        super.onPause();
    }


    /* Metode hasil saat Speech to Text berhenti mendengarkan. Kemudian kata-kata yang dihasilkan di masukkan ke dalam edittext */
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQ_CODE) {
            if (resultCode == RESULT_OK){
                ArrayList<String> result = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS);
                if (result != null) {
                    enterKata.setText(result.get(0));
                }
            }
        }
    }

    /* Metode Toast Message. Supaya tidak berulang-ulang memanggil objek toast saat di perlukan */
    private void toastM(String toast) {
        Toast t = Toast.makeText(this, toast, Toast.LENGTH_SHORT);
        t.setGravity(Gravity.CENTER, 0, 0);
        t.show();
    }
}

Sekian dan mauliate (terima kasih). Jika ada pertanyaan silahkan di posting di komentar atau lewat kontak form di bilah samping kiri.