Bagaimana Tambahkan Mic Speech Masukan Icon di TEXTAREA sebuah

Sebagai atribut x-webkit-speech bekerja hanya untuk kotak input, belajar bagaimana menambahkan pidato (suara) input mikrofon / mic / icon mike dalam elemen textarea.

A+ A-

Saya menerbitkan artikel sebelumnya di hari tentang bagaimana cara menambahkan icon mic dalam kotak input . Tetapi menambahkan ikon ini mic di TEXTAREA tidak diperkenankan. HTML5 spesifikasi W3C memungkinkan pengguna untuk memasukkan teks dalam kotak masukan elemen melalui pengenalan suara. Fasilitas ini, saat ini didukung oleh browser menerapkan webkit. Browser ini termasuk Chrome, Opera dan Safari.

Jika Anda menambahkan atribut x-webkit-speech ke kotak input; mikrofon / mic / icon mike muncul di kotak input. Mengklik ikon ini mengaktifkan pengenalan suara.

Tapi masukan ucapan mic tidak diperbolehkan dalam elemen textarea. Namun, dengan sedikit CSS dan JavaScript -Anda dapat merancang elemen textarea dengan masukan ucapan. Berikut adalah bagaimana Anda dapat melakukannya:

Pertama-tama, menambahkan kotak INPUT dan kotak textarea di halaman Anda. Pidato mengaktifkan kotak input dengan x-webkit-speech

<textarea id="mytextarea"></textarea>
<input id="speechinput" x-webkit-speech />
Screenshot: fasilitas masukan Pidato melalui x-webkit-speech

Screenshot: fasilitas masukan Pidato melalui x-webkit-speech

Sekarang Anda perlu untuk menyesuaikan dgn mode kotak input sehingga membuat perbatasan menghilang, mengurangi ukuran dan kemudian posisi itu hanya di sebelah kanan dari textarea (meniru penempatan icon mic dalam kotak input). Berikut adalah CSS untuk melakukan hal ini:

#speechinput {
    width: 25px; // just wide enough to show mic icon
    height: 25px; // just high enough to show mic icon
    cursor:pointer;
    border: none;
    position: absolute;
    margin-left: 5px;
    outline: none;
    background: transparent;
}
#mytextarea {
    height: 300px;
    width: 100px;
}

Anda punya trik? Kami akan menerima masukan pidato dalam kotak masukan biasa, dan kemudian, setelah input pidato diakui dan diubah menjadi teks, kami akan mentransfer teks dari input ke textarea.

Jadi, pada akhirnya, semua yang perlu kita lakukan adalah untuk mentransfer teks dari input ke textarea. Hal ini dapat dengan mudah dilakukan dengan JavaScript:

<script>
var mic = document.getElementById('speechinput');
mic.onfocus = mic.blur;
mic.onwebkitspeechchange = function(e) {
document.getElementById('mytextarea').value = speechinput .value;  
};
</script>

Kunci dalam ide ini adalah acara onwebkitspeechchange yang terjadi ketika ada perubahan dalam kotak input x-webkit-speech diaktifkan (yaitu ketika Anda berbicara dan teks akan dikonversi menjadi teks dalam kotak input). Itu PHPied yang diterbitkan ide ini awalnya.

Jangan ragu untuk membiarkan saya tahu jika Anda memiliki pertanyaan tentang topik ini. Aku akan senang untuk mencoba dan membantu Anda. Terima kasih telah menggunakan TechWelkin.