Audio HTML5

Salah satu fitur yang saya sukai dari Google Penelusuran adalah kata kunci define. Meski hanya dapat dipakai saat menggunakan antarmuka bahasa Inggris, memasukkan define dan suatu kata (mis. define risk) pada kotak penelusuran dapat dipakai untuk mencari definisi kata bahasa Inggris tersebut seperti pada kamus ekabahasa. Tidak hanya itu, pencarian dengan define ini pun menyajikan keterangan pelafalan, contoh penggunaan, sinonim, asal kata, serta terjemahan kata tersebut dalam berbagai bahasa. Keren!

Seperti biasa, desain tampilan Google selalu membuat saya kagum. Informasi definisi kata yang sedemikian banyak dapat dikemas dalam tampilan yang sederhana, tetapi tetap menarik dan mudah digunakan. Tautan untuk mendengarkan pelafalan (pronunciation) suatu kata diberikan dengan ikon sederhana berbentuk pengeras suara di samping notasi IPA kata tersebut. Wah, bagaimana cara membuatnya, ya?

Penyelisikan dengan bantuan Firebug menemukan bahwa Google menggunakan elemen audio HTML5. Yaya, saya memang sudah agak lama terjebak dengan Microsoft PowerPoint dan teman-temannya sehingga kurang mengikuti perkembangan teknologi web. Adanya desain responsif pun baru tahu dari Kenrick. Untunglah saya segera insaf dan menerapkan Bootstrap pada Kateglo. Eh, maaf jadi curhat.

Kembali kepada topik elemen audio HTML5, Wiktionary pun sudah menggunakan elemen ini. Bedanya, Wiktionary menampilkan kontrol lengkap elemen audio (tombol putar, volume, dll.), sedangkan Google hanya satu ikon sederhana. Dengan memanfaatkan jQuery, akhirnya saya dapat meniru cara Google. Ada dua hal menarik lain yang saya pelajari saat melakukan hal ini, yaitu (1) penggunaan elemen input untuk menyimpan data gambar dalam format Base64 Data URL (RFC 2397) serta (2) perlakuan khusus untuk metode audio.play() oleh jQuery. Bentuk penerapannya dapat dilihat di github.

Mikrofon (pelantang) sudah punya; teknik menampilkan sudah tahu; sekarang tinggal sedikit demi sedikit merekam pelafalan kata-kata bahasa Indonesia untuk disertakan pada Kateglo. Sepertinya belum ada yang melakukan hal seperti ini.

Sumber gambar: Adam Whitcroft

Satu komentar pada “Audio HTML5

Tinggalkan Balasan ke Desak Pusparini Batalkan balasan