Cara Membuat Voice to Text di React Native

Voice To Text ?

Apa Perbedaanya dengan Text to Voice ?

Mungkin banyak dari kalian yang tau cara membuat Text to Voice seperti yang telah saya bahas pada artikel sebelumnya tentang Cara Membuat Text to Voice di React Native? Namun kesulitan untuk membuat kebalikannya yaitu Voice to Text, atau mungkin juga kalian pernah membuatnya namun dengan menggunakan Google API, IBM Watson atau lainnya yang biasanya ribet. Nah kali ini saya akan mencoba membuat Voice to Text tanpa menggunakan API apapun dan hanya menggunakan Package react-native-voice.

Sumber
https://miro.medium.com/max/556/1*NhOH4X9wKWfO6o8faYFf-w.png

Nah tanpa basa-basi lagi mari langsung saja kita mencoba membuatnya dengan langkah-langkah sebagai berikut:


1.  Download dan pasang react-native-voice di project kalian dengan mengetikan perintah berikut di CMD/Terminal yang sudah berlokasi di directory folder project kalian :

npm install react-native-voice

2. Linkkan project anda dengan package yang telah kita install tadi dengan mengetikan perintah berikut di CMD:

react-native link react-native-voice

2. Import package react-native-voice ke file kita dengan menambahkan syntax berikut:

import Voice from 'react-native-voice';

3. Pastekan code berikut ke dalam file anda 

constructor(props) {
        super(props)
        this.state = {
            started: null,
            recognized: null,
            results: null.
        }

        Voice.onSpeechStart = this.onSpeechStart.bind(this)
        Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this)
        Voice.onSpeechResults = this.onSpeechResults.bind(this)

}

Penjelasan:

- Di sana saya membuat sebuah state yang bernama results yang berfungsi sebagai variable penampung hasil Voice to Text yang telah kita gunakan 

- Di sana saya mendekalarsikan sebuah constructor untuk fungsi Voice dimana saya menuliskan sebagai berikut :

A. Voice.onSpeechStart = this.onSpeechStart.bind(this)
- Saat Voice kita mulai atau start maka akan package akan otomatis menyambungkannya dengan fungsi onSpeechStart(e) yang akan kita buat nanti

B. Voice.onSpeechRecognized = this.onSpeechRecognized.bind(this)
- Saat Voice kita mulai atau start maka akan package akan meminta otorisasi kepada pengguna jika package ingin menggunakan microphone, nah hasil nya akan dimasukan ke dalam fungsi onSpeechRecognized(e)

C. Voice.onSpeechResults = this.onSpeechResults.bind(this)
- Saat Voice kita sudah mendapatkan hasil atau telah selesai maka hasilnya akan dimasukan ke dalam fungsi onSpeechResults(e) yang nantinya akan diproses


4. Buat fungsi untuk menangani pemrosesan mulai dari start mengubah voice menjadi text dan berakhir, yang telah kita definisikan di no 3 tadi seperti berikut :

onSpeechStart(e) {
    this.setState({
        started: '√',
    });
}
onSpeechRecognized(e) {
    this.setState({
        recognized: '√',
    });
}
async onSpeechResults(e) {
    console.log(e.value)
    await this.setState({
        results: e.value,
    });
}
onStartButtonPress(e) {
    console.log("START")
    Voice.getSpeechRecognitionServices()
    Voice.start('id-ID');
}

Penjelasan:

- Fungsi onSpeechStart(e) berfungsi saat voice perekaman dimulai
- Fungsi onSpeechRecognized(e) berfungsi saat voice dikenali
- Fungsi onSpeechResults(e) berfungsi untuk menganani hasil Voice to Text atau suara kita yang telah direkam dan ditranslatekan menjadi text

- Fungsi onStartButtonPress(e) yaitu fungsi saat tombol ditekan yaitu sebagai berikut:

A. console.log("START") menampilkan start di cmd kita

B. Voice.getSpeechRecognitionServices() untuk meminta otorisasi kepada user bahwa package akan menggunakan fitur microphone di perangkat sobat

C. Voice.start('id-ID') untuk memulai perekaman suara sobat yang nantinya akan ditranslatekan menjadi teks dan disana saya menggunakan id-ID yang artinya saya menggunakan Bahasa Indonesia sebagai pengenalan suaranya, dimana saat user berbicara maka yang harus dibicarakan adalah Bahasa Indonesia dan bukan bahasa inggris. Kita bisa menggubahnya sesuai  language code yang dapat kalian lihat disini Language Code

5. Nah sekarang sobat tinggal membuat Button yang berfungsi sebagai tanda jika perekaman suara akan dimulai dan akan memanggil fungsi onStartButtonPress(e)

<Button
    title="Mulai Voice to Text"
    onPress={() => {
        Tts.stop()
        this.onStartButtonPress(this) //memanggil fungsi onStartButtonPress()
    }}
/>

6. Nah sekarang sobat tinggal  menekan tombol tersebut dan coba bicara, nantinya suara yang sobat bicarakan akan ditranslatekan menjadi text, namun tidak semua langsung berhasil. Berikut caranya bagi yang error :

1.  Tambah kode berikut ke dalam file  NamaProject/android/gradle.properties

android.useAndroidX=true
android.enableJetifier=true

2. Didalam file package.json kalian tambahkan kode berikut didalam "scripts"{ }

"postinstall" : "npx jetify"

3.  Install jetifier dengan perintah berikut

npm install --save-dev jetifier
npx jetify

4. Terakhir jalankan file anda dengan perintah berikut di CMD/Terminal yang sudah berada di directory project anda

npx react-native run-android

5. Nah selesai, jika masih belum bisa silahkan comment dibawah nanti akan kami bantu.

Baca Juga : Cara Membuat Text to Voice di React Native

Sekian dari saya BapakNgoding tentang "Cara Membuat Voice to Text di React Native", silahkan kalian comment jika ada masukan atau saran, dan saya mohon maaf sebesar-besarnya jika ada kesalahan kata, dan jangan lupa bagikan artikel kepada teman anda ini jika artikel ini bermanfaat agar teman anda juga mendapat manfaat dari artikel ini dan tetap ikuti perkembangan dari BapakNgoding ya :)