Carian suara HTML5 (carian suara kedai Taobao)_html5 kemahiran tutorial

Html5 menyokong carian suara Malangnya, ia hanya boleh digunakan oleh penyemak imbas dengan teras webkit. Penggunaannya sangat mudah. ​​Anda hanya perlu menambahkan atribut x-webkit-speech pada input.

Dengan cara ini, akan terdapat "mikrofon kecil" di sebelah kanan kotak input anda, yang akan menggesa anda apabila anda mengkliknya

Pada masa ini, sebut sahaja dan kenalinya, seperti carian suara di kedai Taobao:

Atribut lain input suara: lang ialah jenis bahasa

Anda boleh mengawal jenis bahasa pertuturan dalam kotak input, contohnya

Pada masa ini diketahui hanya onwebkitspeechchange Seperti namanya, ia adalah peristiwa yang dicetuskan apabila suara berubah Secara amnya, ia boleh diserahkan sebagai Selepas menyebut ini, ia akan mencari secara automatik.

x-webkit-grammar: Ini bukan atribut untuk carian suara, tetapi ia boleh mengawal tatabahasa input Contohnya, semasa membuat kotak carian, anda boleh menggunakan x-webkit-grammar： Jadikan kandungan input suara sedekat mungkin dengan kandungan carian dan alih keluar aksara yang berlebihan, seperti "的".

Mari kita buat contoh kecil untuk mengujinya

:

Salin kodKodnya adalah seperti berikut :

Cari
< /body>

效果如下：

<img alt="" src="http://files.jb51.net/file_images/article/201301/2013010310294631.png">