Sabtu, 21 Juni 2014

Membuat Button Click Sound Effect pada Aplikasi Android, Efek Suara Ketika Tombol Diklik


Membuat Button Click Sound Effect pada Aplikasi Android, Efek Suara Ketika Tombol Diklik sering dilakukan ketika kita membuat aplikasi berupa Game Android. Karena rasanya sepi atau kurang ramai jika ketika tombol diklik hanya diam saja.

Kali ini kita coba membuat aplikasi untuk memberikan efek suara ketika Button diklik, atau yang sering kita sebut Button Sound Effect pada Aplikasi Android. Caranya sediakan dahulu file *.mp3 yang cukup kecil yang berisi suara yang diinginkan ketika tombol diklik. Jika kesulitan dapat dipakai file yang telah disertakan pada Project Contoh di bawah, yaitu pada folder assets/pop.mp3.


Jika sudah mendapatkan file *.mp3 cara menambahkan dari luar ke Project Android pertama buat dahulu project Android baru di Eclipse. Kemudian cari file *.mp3 yang ingin dimasukkan, dalam hal ini penulis memasukkan file bernama pop.mp3, kemudian klik kanan file tersebut, pilih Copy kemudian kembali ke Eclipse, buka Project Explorer pada Project yang sudah dibuat klik tree nya, buka folder assets kemudian klik kanan Paste, maka file *.mp3 sudah akan masuk di direktori assets di dalam project android dan siap digunakan dari kode program.


Selanjutnya buka MainActivity.java, tambahkan kode program berikut ini :

package com.amijaya.button_sound_effect; import android.app.Activity; import android.content.res.AssetFileDescriptor; import android.media.MediaPlayer; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; public class MainActivity extends Activity { Button button1; Button button2; // http://cariprogram.blogspot.com // nuramijaya@gmail.com @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button1 = (Button)findViewById(R.id.button1); button2 = (Button)findViewById(R.id.button2); button1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub playBeep("pop.mp3"); } }); button2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub button2.playSoundEffect(0); } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } public void playBeep(String soundfile) { MediaPlayer m; try { m = new MediaPlayer(); // AssetManager mngr = getAssets(); if (m.isPlaying()) { m.stop(); m.release(); m = new MediaPlayer(); } // AssetFileDescriptor afd = getAssets().openFd(fileName); AssetFileDescriptor descriptor = getAssets().openFd(soundfile); m.setDataSource(descriptor.getFileDescriptor(), descriptor.getStartOffset(), descriptor.getLength()); descriptor.close(); m.prepare(); m.setVolume(1f, 1f); // m.setLooping(true); m.start(); } catch (Exception e) { } } }

Untuk tampilan, buat desain tampilan berikut ini pada activity_main.xml, tambahkan dua buah Button, yang pertama adalah ketika diklik mengeluarkan suara dari file mp3 yang kita sediakan, yang kedua apabila Button diklik akan mengeluarkan Suara Ringtone Default dari Piranti Handphone atau Tablet Android yang digunakan. Kemudian atur tampilannya menjadi seperti di bawah ini :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    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=".MainActivity" >

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

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Custom Sound MP3" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:soundEffectsEnabled="true"
        android:text="Default Sound" />

</LinearLayout>

Konfigurasi AndroidManifest.xml tidak perlu dirubah :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amijaya.button_sound_effect"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.amijaya.button_sound_effect.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Hasilnya setelah dijalankan maka akan tampil dua buah Tombol, Coba diklik Button pertama akan mengeluarkan efek suara mp3, sedangkan Tombol kedua apabila diklik akan mengeluarkan suara default dari device Tablet atau HP Android. Hasilnya akan tampil seperti berikut ini :


Harap diperhatikan bahwa untuk Button kedua hanya akan mengeluarkan suara jika kondisi piranti HP / Tablet android disetting agar tidak Silent dan Mengeluarkan suara ketika tuts diklik.

Project selengkapnya silakan didownload disini. Jika bingung cara download, silakan lihat caranya disini.

Semoga bermanfaat ^_^

1 komentar: