Membuat player audio android eclipse

Dalam pemebelajaran kali ini kita akan membuat aplikasi sederhana untuk memutar file audio mp3 melalui sebuah tombol play. Skenarionya, jika tombol play diklik, mp3 akan dimainkan. Pada saat bersamaan tombol play menjadi disable . Namun jika mp3 selesai berputar, maka tombol play enable kembali. 

Persiapan:

Untuk mempelajari materi ini selain memerlukan Eclipse IDE dan emulatornya, tapi juga memerlukan file mp3 dam gambar ikon yang akan digunakan dalam pembuatan program. Oleh karena itu, sebelum memulai pengerjaan program disarankan untuk menyiapkan dua file tersebut yang bisa dicari sendiri secara kreatif melalui google.

Jika ingin menggunakan resource yang digunakan dalam latihan ini dapat didownload melalui link berikut :

Icon Play 

File mp3 

Pengerjaan: 

1. Kita mulai pembelajaran ini dengan membuat proyek baru. Silahkan dibuat dengan nama yang unik sesuai identias masing-masing. Misalnya seperti contoh dibawah ini :

2. Dalam folder res proyek, silahkan buat folder baru dengan nama drawable. lanjutkan dengan memasukkan gambar play (atau apa saja untuk mewakili icon play) dalam format * .png. Lihatlah contoh berikut ini :

 

3. Buat folder baru lagi di folder res proyek dan kali ini beri nama raw. Masukkan file mp3 ke dalam folder raw. Latihan ini menggunakan file room_news.mp3. Berikut ini tampilan visualnya dalam proyek:

 

 

4. Lakukan desain pada layout utama xml dengan visual atau kode seperti berikut :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".AktifitasUtama" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <ImageButton
        android:id="@+id/PuterMusik"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="26dp"
        android:src="@drawable/play_buton50" />

    <TextView
        android:id="@+id/Status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/PuterMusik"
        android:layout_below="@+id/PuterMusik"
        android:layout_marginLeft="17dp"
        android:layout_marginTop="20dp"
        android:text="TextView" />

</RelativeLayout> 

5. Lakukan modifikasi tampilan melalui ...res/values/settings.xml sesuai kreatifias. Misalnya seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Puter Musik Priyadi</string>
    <string name="action_settings">Pengaturan</string>
    <string name="hello_world">klik tombol untuk putar musik</string>

</resources>

 6. Lakukan programing pada MainActivity.java dengan kode seperti berikut:

package com.example.putermusikpriyadi;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import java.io.IOException;
import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.TextView;

public class AktifitasUtama extends Activity {
    ImageButton mainkan;
    TextView keterangan;
    MediaPlayer mp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.aktifitas_utama);
        keterangan=(TextView)findViewById(R.id.Status);
        keterangan.setText("Silakan klik tombol play");
      
        mainkan=(ImageButton)findViewById(R.id.PuterMusik);
        mainkan.setOnClickListener(new OnClickListener(){
        public void onClick(View arg0){
        mainkan.setEnabled(false);
        keterangan.setText("Tombol play tidak aktif");
        go();
         }
         });
    }
    public void go(){
        mp = MediaPlayer.create(AktifitasUtama.this, R.raw.room_news);
         try {
         mp.prepare();
         } catch (IllegalStateException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
         } catch (IOException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
         }
         mp.start();
         mp.setOnCompletionListener(new OnCompletionListener(){
         public void onCompletion(MediaPlayer arg0){
         mainkan.setEnabled(true);
         keterangan.setText("Silakan klik tombol play");
         }
         });
}
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.aktifitas_utama, menu);
        return true;
    }
    
}

Catatan : sesuikan nama package dan nama kelas sesuai nama yang dibuat masing-masing.

 

Penjelasan Program : 

* Bagian xml

1. Pada layout xml, Kita memasukkan 3 widget, yaitu TextView untuk memunculkan tulisan
“Puter Musik”.

2. ImageButton untuk membuat button yang didalamnya bisa diberi gambar. Penyesuaian antara button yang dimasukan kedalam proyek dengan button yang dimuat kedalam aplikasi dapat dilihat pada visual berikut :

3.  TextView lagi untuk menampilkan status button aktif atau tidak.

 * Bagian Java

Bagian ini terbagi menjadi 3 blok utama, yaitu :

1. Blok deklarasi objek.
2. Blok sinkronisasi objek terhadap widget di xml sekaligus mengaktifkan ImageButton. Apabila ImageButton diklik, maka method go() dipanggil.
3. Blok method go(), yang berisi fungsi-fungsi untuk memainkan media player. 

Method go() berisi barisan perintah untuk memanggil kelas MediaPlayer. Kelas MediaPlayer bertugas memanggil dan memainkan file audio yang kita simpan di folder raw. Dalam pembelajaran ini, penulis menggunakan file news_room.mp3. Mp adalah object MediaPlayer yang sudah dideklarasikan di awal program.
 

Setelah file mp3 dipanggil, file audio memasuki tahap prepared (mp.prepared()). Pada tahap ini menggunakan try-catch. Trycatch adalah cara java untuk mengeksekusi suatu perintah yang ada didalam try. Jika eksekusi gagal, langsung ditangani oleh perintah yang ada didalam catch.

Setelah memaskui mp.prepared(), kemudian menggunakan mp.start() untuk mulai memainkan mp3. Sampai disini sudah terlihat, begitu ImageButton diclick, file mp3 akan diputar, ImageButton menjadi tidak aktif dan tulisan yang tampil adalah “Tombol play tidak aktif”. Ide berikutnya adalah mengaktifkan kembali ImageButton jika file mp3 sudah selesai diputar. Maka digunakan method setOnCompletionListener().

Untuk mengetahui apakah mp3 selesai diputar atau belum, kita gunakan method onCompletion(). Disinilah kita
kembali mengaktifkan imageButton (baris 47) dan mengubah status imageButton menjadi “Silakan Klik tombol play” . Dengan demikian, begitu mp3 selesai diputar, maka ImageButton mainkan kembali aktif, dan TextView keterangan kembali menampilkan tulisan “Silakan klik tombol play”. 

Demonstrasi menjalankan proyek dapat dilihat pada video berikut ini :


 

 

Komentar

Postingan populer dari blog ini

Kumpulan Materi PPT Perkuliahan Logika dan Algoritma Pemrograman dengan Bahasa Pascal

Perbedaan PHP 7 dan PHP 8