Bismillahirrahmanirrahim.

Unduh tutorial ini versi PDF.

Aplikasi GUI membutuhkan User Experience Design (UX) yang baik. Di antara poin penting UX adalah membuat pengguna tahu apa yang harus dilakukan. Salah satu metode untuk merealisasikan hal itu adalah dengan memberikan emphasizing untuk bagian-bagian user interface (UI) tertentu. Emphasizing ada banyak macam, dan salah satu yang terbaik adalah suara ketika terdapat event yang dikerjakan. Metode emphasize dengan suara ini diterapkan di jejaring sosial Facebook ketika terdapat notifikasi komentar, pernyataan suka, pesan masuk, dan segala yang menyinggung pengguna secara langsung. Metode ala Facebook inilah yang akan kita terapkan pada program Qt kali ini. Kita akan membuat aplikasi yang tombol-tombolnya memiliki suara sendiri ketika diklik. Tujuan pembuatan program ini adalah memberikan UX terbaik bagi pengguna.

Mengenal Phonon Framework

Apa itu Phonon? Apa hubungannya dengan Qt? Apa hubungannya dengan program kita ini? Secara sederhana, Phonon memungkinkan Anda memutar suara di dalam program Qt. Secara lebih kompleks, Phonon adalah suatu API tersendiri di dalam Qt yang bertugas mengendalikan video dan audio. Phonon sanggup mengimpor audio/video, memutarnya, memberlakukan loop untuknya, melakukan pause, dan hal-hal wajar yang Anda dapatkan dengan audio player pada umumnya. Sebagai contoh, Amarok adalah aplikasi Qt yang memanfaatkan Phonon untuk memutar audio.

Mengenal OGG Vorbis

Jika Anda hanya mengenal MP3 saja sebagai satu-satunya format audio, maka mulailah mengenal format audio satu ini. Namanya adalah OGG Vorbis. Ia adalah format audio yang berlawanan sifat dengan MP3 yakni ia bersifat terbuka bebas, sedangkan MP3 dimiliki (proprietary) oleh pihak tertentu. Mengapa harus OGG? Karena format OGG sudah tersedia dukungannya di Ubuntu secara default sedangkan MP3 tidak. Sehingga, kalaupun Anda belum menginstal paket-paket gstreamer untuk memutar MP3 di Ubuntu Anda saat menerapkan tutorial ini, maka suara tombol tetap bisa Anda dengar karena Ubuntu dapat memutar suara OGG. Tutorial ini akan menggunakan berkas audio OGG sebagai sumber suara tombol. Anda dapat mengunduhnya pada bagian (\refunduh) Unduh Kode Sumber di bawah.

Spesifikasi Sistem

Ubuntu 12.04
Qt Creator 2.4.1
Qt 4.8.0 (32 bit)

Daftar Kelas

Phonon::MediaObject
QCoreApplication

Daftar Method

play()
setApplicationName()

Kode

Seperti biasa, hanya 2 berkas yang perlu diperhatikan.
mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QtGui>
#include <QSound>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

    QPushButton     *satu;
    QPushButton     *dua;
    QPushButton     *tiga;
    QPushButton     *empat;
    QWidget         *widget;
    QVBoxLayout     *vl;

public slots:
//    void bersuara();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

//program mini ini bernama SuaraTombol
//program ini dibuat untuk mempelajari penggunaan Phonon Framework untuk memutar suara ketika tombol diklik
//tujuan akhir dari program ini adalah Perfect User Experience meniru notifikasi Facebook
//ketika pengguna Facebook menjadi sangat termudahkan bersosial ketika ada suara setiap ada notifikasi muncul
//hal yang terpenting dalam UX adalah _membuat_pengguna_tahu_apa_yang_harus_dilakukan_

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <phonon/Phonon/MediaObject>  //perhatikan pustaka baru yang digunakan

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    vl              =       new     QVBoxLayout;

    satu            =       new     QPushButton("SATU");
    dua             =       new     QPushButton("DUA");
    tiga            =       new     QPushButton("TIGA");
    empat           =       new     QPushButton("EMPAT");
    widget          =       new     QWidget;

    satu->setMinimumSize(88,55);
    dua->setMinimumSize(88,55);
    tiga->setMinimumSize(88,55);
    empat->setMinimumSize(88,55);

    QCoreApplication::setApplicationName( "SuaraTombol" );

    Phonon::MediaObject *bunyi_tombol_satu  = Phonon::createPlayer(Phonon::MusicCategory, Phonon::MediaSource("KDE-Sys-Special.ogg"));
    Phonon::MediaObject *bunyi_tombol_dua   = Phonon::createPlayer(Phonon::MusicCategory, Phonon::MediaSource("KDE-K3B-Finish-Success.ogg"));
    Phonon::MediaObject *bunyi_tombol_tiga  = Phonon::createPlayer(Phonon::MusicCategory, Phonon::MediaSource("KDE-Im-Message-Out.ogg"));
    Phonon::MediaObject *bunyi_tombol_empat = Phonon::createPlayer(Phonon::MusicCategory, Phonon::MediaSource("KDE-Im-Message-In.ogg"));

    connect(satu,  SIGNAL(clicked()), bunyi_tombol_satu,  SLOT(play()));
    connect(dua,   SIGNAL(clicked()), bunyi_tombol_dua,   SLOT(play()));
    connect(tiga,  SIGNAL(clicked()), bunyi_tombol_tiga,  SLOT(play()));
    connect(empat, SIGNAL(clicked()), bunyi_tombol_empat, SLOT(play()));

    vl->addWidget(satu);
    vl->addWidget(dua);
    vl->addWidget(tiga);
    vl->addWidget(empat);

    widget->setLayout(vl);

    this->setCentralWidget(widget);

}

MainWindow::~MainWindow()
{
    delete ui;
}

Qt Creator dan Kode

Hasil

Berikut ini tampilan SuaraTombol.

Ketika tombol SATU diklik, maka KDE-Sys-Special.ogg dimainkan. Ketika tombol DUA diklik, maka KDE-K3B-Finish-Success.ogg dimainkan. Dan seterusnya.

Bug

Ketika salah satu tombol diklik, lalu suara dimainkan, lalu dilakukan satu klik lagi sebelum suara pertama usai (interupsi), maka ada standard error muncul Aborting aboutToFinish handling. disertai mogoknya tombol yang diinterupsi. Saya belum menemukan solusinya setelah googling (26 Oktober 2013).

Pembahasan

mainwindow.h

Tidak ada yang istimewa pada header kita kali ini. Jika Anda belum memahami cara deklarasi di dalam header ini, silakan merujuk ke penjelasan deklarasi header.

mainwindow.cpp

Yang perlu diperhatikan pada berkas CPP kita kali ini adalah bagian deklarasi objek dari kelas Phonon::MediaObject dan adanya satu baris deklarasi QCoreApplication. Jika Anda belum memahami cara membuat GUI pada CPP ini, silakan merujuk ke penjelasan cara membuat GUI dasar.

Phonon::MediaObject *bunyi_tombol_satu =
Phonon::createPlayer(Phonon::MusicCategory,
Phonon::MediaSource("KDE-Sys-Special.ogg"));

Deklarasi di atas membentuk sebuah objek yang saya namakan bunyi_tombol_satu dari kelas Phonon::MediaObject. Yang istimewa di sini adalah nama kelas Phonon::MediaObject. Biasanya kita memakai kelas dengan satu kata saja. Kali ini, kita memakai kelas Qt yang terdiri dari dua bagian berbeda yakni namespace Phonon dan kelas MediaObject. Perhatikan juga bahwa saya meletakkan di parameter-nya nama berkas OGG secara langsung tanpa path. Artinya, saya telah meletakkan berkas yang ditulis namanya itu pada folder tempat program di-build. Karena program saya di-build di folder /home/master/Publik/QtProject/SuaraTombol-build-desktop-Qt_4_8_1_in_PATH__System__Release/, maka saya taruh berkas OGG di folder itu. Jika Anda meletakkan berkas OGG pada /home/ridwan, maka nanti tulis lengkap alamat path OGG di parameter-nya /home/ridwan/KDE-Sys-Special.ogg.

QCoreApplication::setApplicationName( "SuaraTombol" );

Deklarasi satu baris di atas wajib ada jika kita membuat program dengan Phonon. Saya belum menemukan alasannya tetapi yang pasti, jika kita hilangkan, maka pasti terjadi galat ketika kompilasi.

Unduh Kode Sumber

Program kali ini bernama SuaraTombol. Di dalamnya sudah tersedia berkas OGG yang digunakan para tulisan ini. Silakan diunduh dan dibuka di Qt Creator Anda.

Alamat: http://otodidak.freeserver.me/tarball/SuaraTombol.tar.gz
Ukuran: 125 KB

Kesimpulan

Harus ada QCoreApplication::setApplicationName() untuk membuat program dengan Phonon.
Program Qt bisa memainkan suara ketika tombol diklik sebagai notifikasi untuk pengguna.

Ade Malsasa Akbar

Ubuntu, GNU/Linux, dan Free Software

Arsip Tag: click

Pemrograman Qt 11 – Phonon Framework untuk Memutar Audio OGG Ketika QPushButton Diklik