Membuat Pemanggil Antrian dengan HTML5, PHP, dan Ubuntu

Membuat Pemanggil Antrian dengan HTML5, PHP, dan Ubuntu

Tutorial Information

ProgramPHP
Version5.3
DifficultyStandar
Estimated Time30 Menit

Aplikasi pemanggil antrian berbasis desktop sudah banyak ditemui, akan tetapi aplikasi pemanggil antrian yang berbasis web masih sangat jarang sekali ditemukan bahkan bisa dibilang…

Aplikasi pemanggil antrian berbasis desktop sudah banyak ditemui, akan tetapi aplikasi pemanggil antrian yang berbasis web masih sangat jarang sekali ditemukan bahkan bisa dibilang kesulitan untuk menemukan aplikasi ini. Hal ini penulis alami ketika ada permintaan dari klien yang minta pada aplikasi mereka ditambahkan pemanggil antrian berbasis suara.

Berbekal pengetahuan dasar tentang fungsi aplikasi di Ubuntu text to speak. Akan tetapi ternyata aplikasi standar Ubuntu tersebut pembacaan bahasa Indonesianya kurang maksimal, maka kemudian penulis memadukan beberapa aplikasi dengan aplikasi berbasis web dan hasilnya dapat disimak pada tutorial berikut.

Tutorial ini menganggap pembaca telah melakukan instalasi Web Server dan Ubuntu di satu mesin dengan benar. Apabila sudah, maka pembaca dapat mengikuti langkah-langkah berikut untuk membuat pemanggil antrian dengan HTML5, PHP dan Ubuntu.

Bagian Pertama Anda harus mempersiapkan dulu engine dari text to speech di Ubuntu yang nantinya akan dimanfaatkan oleh PHP untuk mendapatkan suara yang dibutuhkan.

  1. Bukalah Terminal Ubuntu dan lakukan instalasi aplikasi text to speech, dalam hal ini penulis menggunakan espeak.
    sudo apt-get install espeak
  2. Masih dalam lingkungan Terminal, lakukan instalasi Mbrola. Aplikasi ini digunakan untuk mendapatkan suara dialek bahasa Indonesia yang lebih baik dibandingkan bawaan espeak.
    sudo apt-get install mbrola
  3. Tidak perlu keluar dari Terminal dulu, karena setelah instalasi Mbrola selesai, Anda masih harus mengunduh pustaka bahasa Indonesia dari Mbrola
    sudo apt-get install mbrola-id1 

Setelah ketiga langkah di atas berhasil dilakukan, maka kita akan mempersiapkan folder dan file PHP yang nantinya akan digunakan untuk diakses oleh browser dan memanggil antrian.

Sebelum melangkah lebih lanjut perlu penulis informasikan halaman web penulis tersimpan di /var/www apabila pembaca menggunakan XAMPP atau aplikasi web server lain, silahkan disesuaikan dimana letak file web Anda disimpan.

  1. Buatlah folder yang dapat diakses oleh apache/php, dengan menentukan owner dari folder tersebut. Folder ini nantinya akan menjadi penampung file suara dari antrian yang akan dipanggil. Dalam contoh penulis menggunakan Terminal untuk mengeksekusi perintah
    Cd /var/www/
    mkdir suara
    chown -r www-data:www-data suara
  2. Buatlah file suara.php di folder /var/www/ dengan isi seperti berikut
    <?php
    $kata = $_GET['kata'];
    $file = "suara/" . md5($kata).".wav";
    $perintah = "espeak -v mb-id1 -s 120 '" .$kata ."' | mbrola -e /usr/share/mbrola/voices/id1 - ". $file;
    if (!file_exists($file)) {
            exec($perintah);
    }
    echo "<audio controls=\"controls\" autoplay=\"autoplay\">
      <source src='$file' type=\"audio/wav\" /></audio>";?>
  3. Apabila semua langkah diikuti dengan benar, maka Anda dapat mengakses halaman tersebut di browser seperti ini:
    http://localhost/suara.php
  4. Nah dapat dilhat pada listing kode suara.php terdapat $_GET[‘kata’], maka pada saat mengakses halaman tersebut Anda harus mengirimkan parameter kata. Apabila Anda tidak mengirim parameter ini maka browser tidak akan mengeluarkan suara apa pun. Sebagai contoh:
    http:// localhost /suara.php?kata=Nomor+Antrian+10+Silahkan+menuju+loket+5

Pada browser akan menampilkan tampilan seperti berikut:

Tangkapan Layar

Penutup

Tutorial ini masih jauh dari sempurna, metode yang digunakan pun masih sederhana. Namun dengan metode ini Anda bisa memanggil antrian hingga nama pengantri atau nama customer service yang bertugas tanpa bersusah payah melakukan rekaman suara sendiri.

Tag: , , , , ,

8 Comments

Leave Comment
  1. dzikri says:

    yang ini

    $file = “suara/” . md5($kata).”.wav”;

    gunanya buat apa?

  2. Hery says:

    syntax tersebut digunakan untuk membuat file dari hasil TTS espeak.
    implementasi dalam contoh di atas adalah klien yang memanggil antrian artinya pc klien lah yang mempunyai output suara. sehingga metode yang digunakan adalah browser melalui fitur audio di HTML5 menagkses file audio di server yang dihasilkan TTS espeak di komputernya.
    Kalau ternyata yang diinginkan server yang mengeluarkan output suara maka bisa menggunakan command aplay di perintah yang di eksekusi.
    referensi: http://bit.ly/XrEFdW

  3. romi says:

    kalo yang untuk windows sama atau berbeda kah?

  4. Agus Istanto says:

    Makasih infonya, mau saya coba yang pakai html 5, saya juga pengguna ubuntu, bahkan sekantor sudah saya install ubuntu sejak tahun 2006.
    Bagi yang menginginkan contoh aplikasi antrian dengan php dan mysql bisa ke http://www.youtube.com/watch?v=Q1C76JirOfw

  5. soegi says:

    pada icon suara-nya kok di silang yach, seperti mute gto padahal 3 langkah instalasi nya berhasil semuanya

    terima kasih

  6. drew says:

    wahh trik yg kren nih.. perlu di coba :)
    mau nanya dikit mas, html 5 nya dimananya yah ? saya gak nemu html syntax di postingannya..

    thanks

  7. ical says:

    Kalo untuk windows bisa gak gan ?
    -regards-

  8. ujang says:

    maaf mas saya coba memanggil dengan perintah
    “…kata=Nomor+Antrian+10+Silahkan+menuju+loket+5”
    hanya menyebutkan angka 5 saja padahal semua file suara sudah ada …mohon pencerahannya trims

Write Comment

Your email will not be published. The marked label is required.