Cara Membuat Text to Voice di React Native

Apa itu Text to Voice ?

Sumber :
https://miro.medium.com/max/600/1*4cfke5axE_HYZ4-bXDXwtg.jpeg

Mungkin bagi kalian orang IT sudah mengetahui apa itu Text to Voice, namun tidak jarang juga ada yang belum tau apa itu Text to Voice dan bagaimana cara menggunakannya. Nah tenang saja karena kali ini BapakNgoding akan membahas mengenai apa itu Text to Voice dan bagaimana cara menggunakanya di ReactNative. Text to Voice adalah sebuah komponen atau sistem yang digunakan untuk mengubah atau mengonvert Text menjadi Suara atau Bunyi yang nantinya akan digunakan seperti GoogleAssistant. Nah setelah kita tau tentang Text to Voice sekarang kita akan mencoba menggunakannya di React Native, tanpa panjang lebar lagi mari kita coba langsung sesuai langkah-langkah berikut.

1. Download dan install react-native-tts, nah react-native-tts inilah yang nantinya akan kita gunakan untuk mengubah text menjadi suara dengan perintah berikut :

npm install react-native-tts

2. Link kan package yang telah kita download di node-modules kita ke dalam project react native kita dengan menggunakan perintah berikut :

react-native link react-native-tts

3. Import package react-native-tts kedalam project anda dengan menggunakan perintah berikut :

import Tts from 'react-native-tts';

Disana saya mengimport package react-native-tts dan menyimpannya ke variabel Tts

Baca Juga : Cara Membuat Halaman Slide di React Native

4. Buat fungsi untuk menggunakan react-native-tts

function onPressButton() {
    Tts.setDefaultRate(0.3)
    Tts.speak(
        `Hello im Text to Voice`,
        { androidParams: { KEY_PARAM_VOLUME: 10 } }
    )
}

Fungsi diatas lah yang nantinya akan kita panggil setelah menekan sebuah tombol yang akan kita buat nantinya, namun sebelum itu saya jelaskan terlebih dahulu arti dari script diatas :

- Disana saya menggunakan fungsi Tts.setDefaultRate(0.3) untuk mengatur kecepatan dari suara yang dihasilkan, jadi semakin besar nilai yang kita masukan maka semakin cepat juga komponen tersebut membaca text kita
- Lalu fungsi KEY_PARAM_VOLUME: 10 adalah untuk mengatur volume dari perangkat kita saat suara tersebut dibacakan


5. Buat button yang akan memanggil fungsi onPressButton() diatas

<Button 
    buttonStyle={{ backgroundColor: "#ff6348" }}
    onPress={onPressButton()}>
</Button>

Jadi fungsi dari button diatas adalah untuk memanggil fungsi onPressButton() yang telah kita buat pada fungsi no 4. Sekarang coba tekan tombol tersebut dan dengarkan suara "Hello im Text to Voice"
yang akan otomatis dibacakan sesuai parameter yang kita masukan, dan Tara... sekarang kita telah menggunakan Text to Voice seperti GoogleAssistant. Mungkin saya juga akan membagikan cara untuk mengubah Voice menjadi Text namun dilain kesempatan ya 😁

Note !

- Apabila belum berhasil silahkan coba hapus aplikasi di perangkat anda dan coba install ulang lagi lalu ikuti lagi langkah diatas. Atau jika masih belum bisa silahkan ketik lewat komentar di bawah 

Sekian artikel dari saya tentang "Cara Membuat Text to Voice di React Native". Semoga apa yang saya bagikan ini bisa berguna bagi teman-teman sekalian, dan saya mohon maaf sebesar-besarnya bila ada kata-kata saya yang salah atau kurang berkenan di hati sobat sekalian.