Bangun UI yang dikendalikan suara

Kami telah melihat banyak API baru yang ditambahkan ke web selama beberapa tahun terakhir yang benar-benar mengaktifkan konten web untuk memiliki fungsi yang sama dengan banyak aplikasi untuk beberapa waktu. API yang relatif baru adalah API pengenalan ucapan, yang mungkin mungkin Anda tebak, memungkinkan Anda menggunakan teks Anda sebagai input ke halaman. Ini membutuhkan klik untuk memulai layanan dan lagi untuk berhenti.

Kasus yang hebat untuk ini mungkin dalam memungkinkan aksesibilitas di antara pengguna Anda, memberikan input suara sebagai alternatif untuk mengklik. Jika analitik Anda menunjukkan bahwa Anda memiliki banyak penelusuran seluler, maka pikirkan berapa jauh lebih mudah untuk berbicara di ponsel Anda daripada menggunakan keyboard.

Ada prediksi bahwa antarmuka berbasis layar mungkin mulai menghilang dalam sepuluh tahun. Pada awalnya ini mungkin terdengar seperti fiksi ilmiah, tetapi ketika pengguna semakin nyaman dengan pidato sebagai input melalui orang-orang seperti Alexa dan Siri maka ia berdiri untuk alasan bahwa ini akan menjadi metode input. Tutorial di sini akan membuat Anda mempercepat input ucapan dan kemudian menggunakannya untuk meninggalkan ulasan produk pada Situs E-commerce .

Unduh file untuk tutorial ini.

• 8 Tips Untuk Merancang Antarmuka Voice

01. Mulai proyek

Dari folder file proyek, buka folder 'Mulai' di IDE kode Anda dan buka file 'pidato.html' untuk mengedit. Semua CSS untuk proyek ditulis karena itu bukan fokus API pidato, jadi tambahkan tautan yang ditunjukkan di sini untuk mendapatkan tipe huruf NOTO SERIF dan menautkan file CSS.

 & lt; tautan href = "https://fonts.googLeapis.com/css?family=noto+Serif" rel = "stylesheet" & gt;
& lt; tautan rel = "stylesheet" href = "css / style.css" & gt; 

02. Tambahkan konten

Elemen pertama dari ini adalah memiliki pembungkus untuk memegang semua konten di layar kami. Elemen pertama di sini akan menjadi pesan tersembunyi yang memberitahu pengguna jika API ucapan didukung di browser. Ini hanya akan dilihat jika tidak. Kemudian sebuah pos memberi tahu pengguna bahwa elemen form yang mengikuti akan digunakan untuk pesan mereka.

 & lt; div id = "Wrapper" & gt;
& lt; span id = "tidak didukung" class = "dukungan tersembunyi" & gt; ucapan API tidak didukung & lt; / span & gt;
& lt; h2 & gt; Pesan Anda: & lt; / h2 & gt; 

03. Pilih hasilnya

Saat menggunakan Pidato API ada dua cara untuk menampilkan konten. Dalam satu, teks menampilkan ketika pengguna berhenti berbicara dan tombol 'Mendengarkan' diklik. Yang lain menunjukkan kata-kata di layar seperti yang diucapkan. Tombol radio pertama ini memungkinkan hasil pidato akhir untuk ditampilkan.

 & lt; div id = "typyofinput" & gt;
& lt; rentang & gt; hasil: & lt; / span & gt;
& lt; label & gt;
& lt; tipe input = nama radio = nilai pengenalan-tipe = final & gt; Pidato akhir & lt; / label & gt; 

04. Radio Dua

Tombol radio kedua ditambahkan di sini dan yang satu ini memungkinkan pengguna untuk memilih teks yang akan ditampilkan saat mereka berbicara. Tombol-tombol radio ini akan diambil oleh Javascript nanti dan digunakan untuk mengontrol input ucapan, tetapi untuk saat ini ini memungkinkan pengguna untuk memiliki antarmuka untuk mengontrol itu.

 & lt; label & gt;
& lt; tipe input = nama radio = nilai pengenalan-tipe = interim diperiksa & gt; Saat Anda berbicara & lt; / label & gt;
& lt; / div & gt; 

05. Tampilkan teks

Teks yang digunakan pengguna ke dalam halaman perlu ditampilkan di layar. Di sini area teks ditambahkan yang memiliki ID 'transkripsi' - ini akan ditargetkan sehingga pidato pengguna berakhir di sini. Ada juga tombol yang jelas untuk menghapus teks.

 & lt; textarea id = "transkripsi" Readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; tombol id = "hapus-semua" kelas = "tombol" & gt; hapus teks & lt; / tombol & gt; 

06. Antarmuka terakhir

Elemen antarmuka terakhir ditambahkan ke layar sekarang. Tombol pidato memungkinkan dan menonaktifkan pidato, sehingga harus diklik sebelum berbicara. Mengklik lagi menghentikannya. Karena ini adalah interaksi yang relatif baru, log di bawahnya akan memberi tahu pengguna apa yang harus dilakukan.

& lt; div class = "button-wrapper" & gt;
    & lt; div id = "speechbutton" class = "Mulai" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; klik untuk mulai berbicara & lt; / div & gt;
& lt; / div & gt; 

07. Tambahkan JavaScript.

Sekarang tambahkan tag skrip sebelum tag tubuh penutupan. Di sinilah semua JavaScript akan pergi. Dua baris pertama ambil elemen halaman dengan ID yang cocok dan simpan dalam variabel. Transkripsi adalah hasil teks dari pidato. Log akan memperbarui pengguna dengan cara menggunakannya.

 & lt; script & gt;
transkripsi var = dokumen.getelementbyid ('transkripsi');
var log = document.getelementbyid ('log');
& lt; / script & gt; 

08. Hasil variabel

Menggunakan beberapa variabel berikutnya, lebih banyak elemen antarmuka di-cache. Tombol pidato akan menjadi sakelar, membiarkan pengguna beralih dan mati., Dipantailkan oleh variabel boolean, true / false. Tombol hapus semua akan menghapus hasil ucapan yang tidak memuaskan.

 var start = document.getelementbyid ('speechbutton');
var clear = document.getelementbyid ('hapus-all');
var speaking = false; 

09. Apakah didukung?

Hal pertama yang akan dilakukan Kode kami adalah mengetahui apakah fitur ucapan ini didukung oleh browser pengguna. Jika hasil ini kembali sebagai NULL maka pernyataan IF melempar pesan tersembunyi, sambil secara bersamaan mengambil tombol mulai dari antarmuka untuk menghentikan input ucapan.

 window.speechrecognition = window.speechRecognition ||
window.webkitspeechRecognition ||
batal;
if (window.speechRecognition === null) {
dokumen.getelementbyid ('tidak didukung'). classlist.remove ('hidden');
start.classlist.add ('hidden');
} else {

10. Mulai pengakuan

Pengenalan ucapan dimulai sebagai 'orang lain' untuk pengenalan ucapan tersedia. Input kontinu dimulai karena itu adalah default pada tombol radio. Fungsi 'onResult' akan menangani hasil input ucapan. Ini akan ditambahkan ke bidang teks transkripsi.

 var pengenal = jendela baru.
Pengenalan suara();
pengenal. Kontinuous = Benar;
pengenal.onresult = fungsi (acara) {
transkripsi.textcontent = '';
untuk (var i = event.resultindex; i & lt; event.
hasil.anjang; i ++) {

11. Final atau Interim?

Pernyataan IF sekarang memeriksa untuk melihat apakah pengguna ingin menampilkan teks saat mereka berbicara (sementara) atau hanya setelah mereka selesai berbicara (final). Anda akan melihat bahwa jika interim, setiap kata ditambahkan ke teks dengan '+ =', sedangkan final hanya membuang seluruh teks di sana.

 jika (event.results [i] .isfinal) {
transkripsi.textcontent = event.results [i] 
 .Transcript;
} lain {
transkripsi.textcontent + = event.results [i] 
 .Transcript;
}
}
}; 

12. Penanganan Kesalahan

Seperti halnya sebagian besar JavaScript API ada penangan kesalahan yang akan memungkinkan Anda untuk memutuskan apa yang harus dilakukan dengan masalah apa pun yang mungkin timbul. Ini dilemparkan ke dalam div 'Log' untuk memberikan umpan balik kepada pengguna, karena penting bahwa mereka menyadari apa yang mungkin terjadi dengan antarmuka.

 pengenal.onerror = fungsi (acara) {
Log.InnerHTML = 'Kesalahan pengakuan:' +
event.message + '& lt; br / & gt;' + log.innerhtml;
}; 

13. Mulailah berbicara!

Acara pendengar di sini dimulai ketika pengguna mengklik tombol untuk mulai berbicara. Jika pengguna tidak berbicara, maka tombol berubah warna untuk menunjukkan yang sudah dimulai, variabel untuk berbicara diatur ke true dan tombol radio 'sementara' diperiksa untuk melihat apakah ini adalah pilihan pengguna untuk input.

 start.addeventlistener ('klik', fungsi () {
Jika (! Berbicara) {
Berbicara = Benar;
start.classlist.toggle ('stop');
Pengenal.InterimResults = Dokumentasikan.
Queryselector ('input [name = "Recogti
on-type "] [nilai =" interim "] '). diperiksa; 

14. Ambil input

Pernyataan 'cobalah dan tangkapan' sekarang memulai pengenalan ucapan dan memberi tahu pengguna bahwa mereka harus mulai berbicara dan ketika mereka selesai, 'Klik lagi untuk berhenti'. Tangkapan akan mengambil kesalahan dan melemparkannya ke dalam div 'log' sehingga pengguna dapat memahami apa yang mungkin salah.

 coba {
pengenal. Mulai ();
log.innerhtml = 'mulai berbicara sekarang
& lt; br / & gt; klik untuk berhenti ';
} catch (ex) {
Log.InnerHTML = 'Kesalahan pengenalan:
& lt; br / & gt; ' + ex.message;
} 

15. Klik untuk Berhenti

Sekarang ketika pengguna mengklik untuk berhenti berbicara, pengenalan ucapan dihentikan. Tombol diubah kembali menjadi hijau dari merah saat berbicara. Antarmuka pengguna diperbarui sehingga pengguna diberi tahu bahwa layanan telah berhenti. Variabel berbicara diatur ke false, siap untuk membiarkan pengguna berbicara lagi.

} else {
Pengenal.Stop ();
start.classlist.toggle ('stop');
Log.InnerHTML = 'Pengakuan berhenti
& lt; br / & gt; klik untuk berbicara ';
Berbicara = Salah;
}
}); 

16. Bersihkan teks

Kode akhir untuk bagian ini hanyalah tombol yang jelas untuk menghapus teks input ucapan jika itu salah ditafsirkan. Simpan file dan uji ini di browser Anda. Anda akan dapat mengklik tombol untuk berbicara ke komputer dan melihat hasilnya.

 clear.addeventlistener ('klik', fungsi () {transkripsi.textcontent = '';
});
} 

17. Tambah Tujuan

Sekarang karena Anda memiliki contoh kerja, perlu ada beberapa tujuan untuk antarmuka, jadi mari kita buat ini sehingga pengguna dapat memasukkan ulasan. Simpan halaman dan kemudian pilih Simpan sebagai, dengan nama baru 'ulasan'. Tambahkan elemen HTML berikut tepat setelah & lt; div id = "Wrapper" & gt; garis.

 & lt; h1 & gt; ulasan produk & lt; / h1 & gt;
& lt; Ulasan div id = "Ulasan" & gt; & lt; / div & gt; 

18. Total pengiriman

Kode sebelumnya akan memiliki ulasan. Pengguna perlu mengirimkan input ucapan mereka, jadi tambahkan tombol kirim tepat setelah tombol 'hapus teks', yang akan berada di sekitar baris 28 dalam kode Anda. Kemudian Anda dapat pindah ke JavaScript untuk langkah selanjutnya.

 & lt; tombol id = "Kirim" Kelas = "tombol" & gt; kirimkan ulasan & lt; / tombol & gt; 

19. Elemen antarmuka baru

Di bagian atas JavaScript Anda tambahkan variabel baru untuk menahan referensi ke elemen antarmuka baru yang baru saja ditambahkan. Ini akan memberi Anda cara untuk mengirimkan dan menampilkan hasil pada layar dalam bagian 'ulasan' dari halaman.

 var kirim = Document.GetElementByid ('kirim');
var review = document.getelementbyid ('ulasan'); 

20. Kirim entri

Sekarang kode di sini akan menangani ketika pengguna mengklik tombol kirim, letakkan ini tepat sebelum kode tombol 'jelas', yang harus di sekitar baris 88 dalam kode Anda. Pertama, tag paragraf dibuat dan input ucapan kemudian ditambahkan ke dalamnya. Ini kemudian akan ditambahkan ke bagian 'Review'.

 kirim.AddeventListener ('klik', fungsi () {
Biarkan P = Document.CreateTeelement ('P');
var textnode = document.creationetextnode
(transkripsi.value);
p.appendchild (TextNode);
Ulasan.AppendChild (p);
Biarkan hari ini = tanggal baru ();
biarkan s = document.createteelement ('kecil'); 

21. Pengajuan akhir

Tanggal ditambahkan sehingga tinjauannya hanya saatnya di dokumen. Akhirnya aturan horizontal ditambahkan untuk menunjukkan di mana setiap ulasan berakhir, maka teks dihapus siap untuk input baru. Simpan halaman dan uji ini. Anda akan melihat bahwa Anda sekarang dapat mengirimkan pidato Anda ke halaman sebagai ulasan. Untuk kegigihan Anda perlu menggunakan database untuk menyimpan hasil ini.

 TextNode = Document.CreationTextNode (hari ini);
S.AppendChild (TextNode);
Ulasan.AppendChild (s);
biarkan jam = dokumen.createteelement ('hr');
Ulasan.AppendChild (SDM);
transkripsi.textcontent = '';
}); 

Artikel ini awalnya diterbitkan dalam edisi 286 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 286 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• 14 dari API JavaScript terbaik
• Bangun chatbot bertenaga AI
• 5 Tren UX yang muncul pada tahun 2019