Ahh sori agan - agan, ane udh lama ga share soalnya lagi sibuk sama tugas, tpi kali ini ane bakal share yang baru dan masih hangat, monggo dilihat. Seperti yang agan semua tahu, HTML 5 merupakan versi terbaru dari bahasa HTML yang menambahkan berbagai macam tag-tag yang membuat website bisa jauh lebih interaktif tanpa memerlukan bantuan plugin seperti Flash, Silverlight atau Java (bukan JavaScript ya…).
Nah, salah satu dari HTML 5 ini adalah Voice Transcription. Sampai sekarang memang Voice Transcription ini masih hanya berfungsi pada browser Google Chrome. Mungkin Firefox, Opera, Internet Explorer serta Safari akan menyusul nanti…
Untuk membuatnya sebenarnya sangatlah mudah! Agan-agan hanya perlu menambahkan sebuah tambahan pada tag <input>. Jari-jemari ga perlu capek hanya untuk menulisnya karena hanya sedikit saja yang perlu ditambahkan…
Oke, dari pada kebanyakan ngomong teori (sebagian besar orang bosen dengan teori, iya kan?) maka dari itu kita langsung lompat ke Prakteknya saja. Kita mulai dengan membuat form sederhana yang isinya adalah sebuah input box dan submit button.
Yap! Cuma sekedar page dengan input box biasa ditambah submit button yang juga biasa (NB: Memang submit buttonnya tidak akan kita apa-apain. Yang kita ubah hanya input boxnya saja). Sekarang waktunya kita menambahkan Voice Transcription pada input boxnya. Mari kita ubah…
Waktunya fokus kembali pada script input boxnya:
Sudah deh, nongol gambar Microphone di Input Boxnya. Coba klik Microphonenya dan katakanlah sesuatu (dalam Bahasa Inggris) dan lihat hasilnya… Mantap bukan ..??
Itu hanyalah contoh sederhana dari penggunaan Voice Transcription HTML5. Kita bisa mengembangkannya lagi menjadi sesuatu yang lebih baik seperti untuk situs dictionary, dsb. Pokoknya, tergantung imajinasi deh
Terima kasih sudah membaca artikel buatan saya… Jadi saya mohon maaf bila ada kata-kata yang salah mengingat ini artikel pertama saya di Binus Hacker dan saya juga manusia yang pastinya pernah berbuat kesalahan, karena manusia itu tak ada yang sempurna.
Nah, salah satu dari HTML 5 ini adalah Voice Transcription. Sampai sekarang memang Voice Transcription ini masih hanya berfungsi pada browser Google Chrome. Mungkin Firefox, Opera, Internet Explorer serta Safari akan menyusul nanti…
Untuk membuatnya sebenarnya sangatlah mudah! Agan-agan hanya perlu menambahkan sebuah tambahan pada tag <input>. Jari-jemari ga perlu capek hanya untuk menulisnya karena hanya sedikit saja yang perlu ditambahkan…
Oke, dari pada kebanyakan ngomong teori (sebagian besar orang bosen dengan teori, iya kan?) maka dari itu kita langsung lompat ke Prakteknya saja. Kita mulai dengan membuat form sederhana yang isinya adalah sebuah input box dan submit button.
<html>Hasilnya adalah seperti ini:
<head>
<title>Contoh HTML5 Voice Transcription</title>
</head>
<body>
<h1>Voice Transcription</h1>
<form>
<input type=”input” name=”contohinput” /><br/><input type=”submit” name=”contohsubmit”/>
</form>
</body>
</html>
Yap! Cuma sekedar page dengan input box biasa ditambah submit button yang juga biasa (NB: Memang submit buttonnya tidak akan kita apa-apain. Yang kita ubah hanya input boxnya saja). Sekarang waktunya kita menambahkan Voice Transcription pada input boxnya. Mari kita ubah…
Waktunya fokus kembali pada script input boxnya:
<input type=”input” name=”contohinput” />Untuk menambahkan Voice Transcription maka kita harus menambahkan “x-webkit-speech” (tanpa tanda petik) ke tag input boxnya sehingga scriptnya menjadi seperti ini:
<input type=”input” name=”contohinput” x-webkit-speech/>Sehingga secara keseluruhan scriptnya menjadi seperti ini:
<html>Nah, mari kita coba Save dan uji coba (lagi)
<head>
<title>Contoh HTML5 Voice Transcription</title>
</head>
<body>
<h1>Voice Transcription</h1>
<form>
<input type=”input” name=”contohinput” x-webkit-speech/><br/><input type=”submit” name=”contohsubmit”/>
</form>
</body>
</html>
Sudah deh, nongol gambar Microphone di Input Boxnya. Coba klik Microphonenya dan katakanlah sesuatu (dalam Bahasa Inggris) dan lihat hasilnya… Mantap bukan ..??
Itu hanyalah contoh sederhana dari penggunaan Voice Transcription HTML5. Kita bisa mengembangkannya lagi menjadi sesuatu yang lebih baik seperti untuk situs dictionary, dsb. Pokoknya, tergantung imajinasi deh
Terima kasih sudah membaca artikel buatan saya… Jadi saya mohon maaf bila ada kata-kata yang salah mengingat ini artikel pertama saya di Binus Hacker dan saya juga manusia yang pastinya pernah berbuat kesalahan, karena manusia itu tak ada yang sempurna.
3 komentar:
gan ini semacam yang ada di google transate itu ya?
ato beda lagi????
It is really a great post I have ever seen. Its an amazing experience. I would like to visit it again and again. because I need some more information. Now a days people are in to the habit of making posts. I think it would be a good inspiration for them.
Thanks before, and i'll post more later ..
Posting Komentar