Cara Ubah Suara Menjadi Teks Dengan Javascript – Dalam tutorial ini, kami akan mencoba menggunakan API Web Speech. Ini adalah antarmuka peramban yang sangat kuat yang memungkinkan Anda merekam ucapan manusia dan mengubahnya menjadi teks. Kami juga akan menggunakannya untuk melakukan kebalikan-membaca string dengan suara seperti manusia.

Ayo masuk!

Cara Ubah Suara Menjadi Teks Dengan Javascript
Source : medium.com @madhura.gore

Aplikasi

Untuk mendemonstrasikan fungsionalitas API, kami akan membuat aplikasi catatan suara sederhana. Itu melakukan tiga hal:

  • Buat catatan dengan menggunakan input ucapan-ke-teks atau keyboard tradisional.
  • Simpan komentar ke localStorage.
  • Tampilkan semua catatan dan berikan opsi untuk mendengarkan melalui sintesis ucapan.

Baca Juga : 7 Templat Aplikasi Untuk Restoran Anda

Source : tutorialzine.com

Kami tidak akan menggunakan dependensi mewah apa pun, hanya gunakan jQuery lama yang bagus untuk menyederhanakan operasi DOM, dan menggunakan Shoelace untuk mengimplementasikan gaya CSS. Kami akan memasukkannya langsung melalui CDN tanpa melibatkan NPM dalam proyek sekecil itu.

HTML dan CSS sangat standar, jadi kami akan melewatkannya dan menggunakan JavaScript secara langsung. Untuk melihat kode sumber lengkap, pergi ke tombol “Download” di dekat bagian atas halaman.

Suara Menjadi Text

Faktanya, Web Speech API dibagi menjadi dua antarmuka yang sepenuhnya independen. Kami memiliki fungsi pengenalan suara, yang digunakan untuk memahami ucapan manusia dan mengubahnya menjadi teks (suara-> teks), dan sintesis ucapan digunakan untuk membaca string dengan lantang dalam ucapan yang dihasilkan komputer (teks-> suara). Kami akan mulai dengan yang pertama.

Baca Juga : 6 Contoh Praktis Membangun Paralaks Websites

API pengenalan suara sangat akurat untuk fungsi browser gratis. Itu dapat dengan benar mengenali hampir semua bahasa lisan saya dan mengetahui kata mana yang dapat digabungkan untuk membentuk frasa yang bermakna. Ini juga memungkinkan Anda untuk menentukan karakter khusus seperti titik, tanda tanya dan baris baru.

Hal pertama yang perlu kita lakukan adalah memeriksa apakah pengguna memiliki akses ke API dan menampilkan pesan kesalahan yang sesuai. Sayangnya, API ucapan ke teks hanya didukung di Chrome dan Firefox (dengan bendera), sehingga banyak orang mungkin melihat pesan tersebut.

try {
  var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  var recognition = new SpeechRecognition();
}
catch(e) {
  console.error(e);
  $('.no-browser-support').show();
  $('.app').hide();
}

recognition variabel akan memungkinkan kita mengakses semua metode dan properti API. Ada beberapa opsi yang tersedia, tetapi kami hanya akan menyetel recognition.continuous menjadi benar. Ini akan membuat pengguna berhenti lebih lama antara kata dan frasa.

Sebelum menggunakan pengenalan ucapan, kita juga harus menyiapkan beberapa penangan acara. Kebanyakan dari mereka hanya mendengarkan perubahan status pengenalan:

recognition.onstart = function() { 
  instructions.text('Voice recognition activated. Try speaking into the microphone.');
}

recognition.onspeechend = function() {
  instructions.text('You were quiet for a while so voice recognition turned itself off.');
}

recognition.onerror = function(event) {
  if(event.error == 'no-speech') {
    instructions.text('No speech was detected. Try again.');  
  };
}

Namun, ada acara onresultkhusus yang sangat penting. Setiap kali pengguna mengucapkan satu atau beberapa kata secara berurutan, tindakan ini dilakukan, memungkinkan kami mengakses transkripsi teks dari apa yang diucapkan.

Baca Juga : Membuat Single Page Aplikasi Tanpa Framework

Saat kami menggunakan penangan onresult untuk menangkap sesuatu, itu akan disimpan dalam variabel global dan ditampilkan di textarea:

recognition.onresult = function(event) {

  // event is a SpeechRecognitionEvent object.
  // It holds all the lines we have captured so far. 
  // We only need the current one.
  var current = event.resultIndex;

  // Get a transcript of what was said.
  var transcript = event.results[current][0].transcript;

  // Add the current transcript to the contents of our Note.
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Kode di atas sedikit disederhanakan. Ada bug yang sangat aneh pada perangkat Android yang menyebabkan semua operasi diulang dua kali. Belum ada solusi resmi, tetapi kami berhasil menyelesaikan masalah tanpa efek samping yang jelas. Mengingat kesalahannya, kodenya terlihat seperti ini:

var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);

if(!mobileRepeatBug) {
  noteContent += transcript;
  noteTextarea.val(noteContent);
}

Setelah menyelesaikan semua pengaturan, kita dapat mulai menggunakan fungsi pengenalan suara browser. Untuk memulainya, panggil saja metode start():

$('#start-record-btn').on('click', function(e) {
  recognition.start();
});

Ini akan meminta pengguna untuk memberikan izin. Jika disetujui, mikrofon perangkat akan diaktifkan.

Kebanyakan API yang membutuhkan izin pengguna tidak cocok untuk host yang tidak aman. Pastikan Anda melayani aplikasi Web Speech melalui HTTPS.

Browser akan mendengarkan sebentar, dan setiap frase atau kata yang dikenali akan ditranskripsikan. Setelah beberapa detik hening atau berhenti manual, API secara otomatis akan menghentikan pemantauan.

$('#pause-record-btn').on('click', function(e) {
  recognition.stop();
});

Dengan cara ini, bagian ucapan-ke-teks dari aplikasi kita selesai! Sekarang, mari lakukan yang sebaliknya!

Teks Menjadi Suara

Sistem sintesis suara sebenarnya sangat sederhana. API dapat diakses melalui objek SpeechSynthesis, dan ada dua cara untuk memutar, menjeda, dan konten terkait audio lainnya. Ini juga memiliki beberapa opsi keren untuk mengubah nada, kecepatan, dan bahkan suara pembaca.

Baca Juga : Membuat Sistem Pendaftaran Dengan PHP Dan Mysql

Yang perlu kita tunjukkan hanyalah metode speak(). Ini membutuhkan argumen, sebuah instance dari kelas SpeechSynthesisUtterance yang bernama indah.

Ini semua kode yang dibutuhkan untuk membaca string.

function readOutLoud(message) {
  var speech = new SpeechSynthesisUtterance();

  // Set the text and voice attributes.
  speech.text = message;
  speech.volume = 1;
  speech.rate = 1;
  speech.pitch = 1;

  window.speechSynthesis.speak(speech);
}

Saat memanggil fungsi ini, suara robot akan membaca senar yang diberikan, yang merupakan kesan terbaik bagi manusia.

Kesimpulannya

Di era ketika asisten suara lebih populer dari sebelumnya, API seperti ini memberi Anda jalan pintas untuk membangun robot yang memahami dan berbicara bahasa manusia.

Menambahkan kontrol suara ke aplikasi Anda juga bisa menjadi bentuk aksesibilitas yang ditingkatkan. Pengguna tunanetra dapat memanfaatkan antarmuka pengguna suara-ke-teks dan teks-ke-ucapan.

Sintesis ucapan dan API pengenalan ucapan berfungsi dengan baik dan dapat dengan mudah menangani berbagai bahasa dan aksen. Sayangnya, mereka saat ini memiliki dukungan browser yang terbatas, yang mempersempit ruang lingkup penggunaan dalam produksi. Jika Anda membutuhkan bentuk pengenalan ucapan yang lebih andal, periksa API pihak ketiga berikut:

  • API Google Cloud Speech
  • Bing Voice API
  • CMUSphinx dan versi JavaScript Pocketsphinx-nya (keduanya open source).
  • API.AI-API Google Gratis didukung oleh pembelajaran mesin