22
Oct
2014

Audio player sederhana

Tutorial kali ini akan membahas bagaimana membuat sebuah aplikasi untuk memutar musik. Pada android, untuk memutar audio/video bisa digunakan class media player. Audio player sederhana ini, hanya bisa melakukan play, pause, stop dan repeat.

Langkah-langkahnya:

  1. Desain tampilan
    Tambahkan 3 buah button yaitu button play/pause, stop dan repeat. Selain itu, tambahkan 2 buah textview, untuk mengetahui status media player.
    activity_main.xml

    <LinearLayout 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: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="com.heendher.audioplayer.MainActivity" >
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
    
            <ImageButton
                android:id="@+id/imageButtonStop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_action_stop" />
    
            <ImageButton
                android:id="@+id/imageButtonPlay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_action_play" />
    
            <ImageButton
                android:id="@+id/imageButtonRepeat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_action_repeat" />
    
        </LinearLayout>
    
        <TextView
            android:id="@+id/textViewStatus1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp" />
    
        <TextView
            android:id="@+id/textViewStatus2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp" />
    
    </LinearLayout>
    

     

  2. Syntax program
    Deklarasikan variabel global media player, imagebutton, textview dan String, letakkan diatas protected void onCreate.
    Musik yang dimainkan masih musik dari lokal folder saat develop, jadi untuk menggantinya yaitu dengan menambahkan atau mengganti musik pada folder raw. Dan jangan lupa mengganti nama musik pada setDataSource pada method initMediaPlayer.1

    	MediaPlayer mediaPlayer;
    	ImageButton playImageButton, stopImageButton, repeatImageButton;
    	TextView status1TextView, status2TextView; 
    	String packageName;

    Inisialisasi variabel diatas dan membuat sebuah listener, ketika musik selesai dimainkan, letakkan didalam method protected void onCreate

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            packageName = getApplicationContext().getPackageName();
            mediaPlayer = new MediaPlayer();
            playImageButton = (ImageButton)findViewById(R.id.imageButtonPlay);
            stopImageButton = (ImageButton)findViewById(R.id.imageButtonStop);
            repeatImageButton = (ImageButton)findViewById(R.id.imageButtonRepeat);
            playImageButton.setOnClickListener(this);
            stopImageButton.setOnClickListener(this);
            repeatImageButton.setOnClickListener(this);
            status1TextView = (TextView)findViewById(R.id.textViewStatus1);
            status2TextView = (TextView)findViewById(R.id.textViewStatus2);
            initMediaPlayer();
            mediaPlayer.setOnCompletionListener(new OnCompletionListener() {
    			
    			@Override
    			public void onCompletion(MediaPlayer mp) {
    				status1TextView.setText("Music has finished");
    				playImageButton.setImageResource(R.drawable.ic_action_play);
    				
    			}
    		});
        }

    Buat satu buah method dengan nama initMediaPlayer

        void initMediaPlayer()
        {
        	try {
        		        mediaPlayer.reset();
    			mediaPlayer.setDataSource(this, Uri.parse("android.resource://"+packageName+ "/" + R.raw.mozart));
    			mediaPlayer.prepare();
    			if(mediaPlayer.isLooping()){
    				status2TextView.setText("Repeat On");
    			}else {
    				status2TextView.setText("Repeat Off");
    			}
    		} catch (IllegalArgumentException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		} catch (SecurityException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		} catch (IllegalStateException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		} catch (IOException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
        }

    Event handler untuk ketiga imagebutton diatas

    public class MainActivity extends ActionBarActivity implements OnClickListener

     

    	@Override
    	public void onClick(View v) {
    		switch (v.getId()) {
    		case R.id.imageButtonPlay:
    			if(mediaPlayer.isPlaying()){
    				mediaPlayer.pause();
    				status1TextView.setText("Media Player paused");
    				playImageButton.setImageResource(R.drawable.ic_action_play);
    			}
    			else {
    				mediaPlayer.start();
    				status1TextView.setText("Media Player is playing");
    				playImageButton.setImageResource(R.drawable.ic_action_pause);
    				
    			}
    			break;
    		case R.id.imageButtonStop:
    			if(mediaPlayer.isPlaying()){
    				initMediaPlayer();
    				status1TextView.setText("Media Player stopped");
    				playImageButton.setImageResource(R.drawable.ic_action_play);
    			}
    			
    				
    			break;
    		case R.id.imageButtonRepeat:
    			if(mediaPlayer.isLooping()){
    				mediaPlayer.setLooping(false);
    				status2TextView.setText("Repeat Off");
    			}else {
    				mediaPlayer.setLooping(true);
    				status2TextView.setText("Repeat On");
    			}
    			break;
    		default:
    			break;
    		}
    		
    	}

     

     

Full code audio player ini

mainactivity.java

import java.io.IOException;

import android.media.MediaPlayer;
import android.media.MediaPlayer.OnCompletionListener;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.TextView;


public class MainActivity extends ActionBarActivity implements OnClickListener{

	MediaPlayer mediaPlayer;
	ImageButton playImageButton, stopImageButton, repeatImageButton;
	TextView status1TextView, status2TextView; 
	String packageName;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        packageName = getApplicationContext().getPackageName();
        mediaPlayer = new MediaPlayer();
        playImageButton = (ImageButton)findViewById(R.id.imageButtonPlay);
        stopImageButton = (ImageButton)findViewById(R.id.imageButtonStop);
        repeatImageButton = (ImageButton)findViewById(R.id.imageButtonRepeat);
        playImageButton.setOnClickListener(this);
        stopImageButton.setOnClickListener(this);
        repeatImageButton.setOnClickListener(this);
        status1TextView = (TextView)findViewById(R.id.textViewStatus1);
        status2TextView = (TextView)findViewById(R.id.textViewStatus2);
        initMediaPlayer();
        mediaPlayer.setOnCompletionListener(new OnCompletionListener() {
			
			@Override
			public void onCompletion(MediaPlayer mp) {
				status1TextView.setText("Music has finished");
				playImageButton.setImageResource(R.drawable.ic_action_play);
				
			}
		});
    }

    void initMediaPlayer()
    {
    	try {
    		mediaPlayer.reset();
			mediaPlayer.setDataSource(this, Uri.parse("android.resource://"+packageName+ "/" + R.raw.mozart));
			mediaPlayer.prepare();
			if(mediaPlayer.isLooping()){
				status2TextView.setText("Repeat On");
			}else {
				status2TextView.setText("Repeat Off");
			}
		} catch (IllegalArgumentException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SecurityException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalStateException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
    }
    
    @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;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }


	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.imageButtonPlay:
			if(mediaPlayer.isPlaying()){
				mediaPlayer.pause();
				status1TextView.setText("Media Player paused");
				playImageButton.setImageResource(R.drawable.ic_action_play);
			}
			else {
				mediaPlayer.start();
				status1TextView.setText("Media Player is playing");
				playImageButton.setImageResource(R.drawable.ic_action_pause);
				
			}
			break;
		case R.id.imageButtonStop:
			if(mediaPlayer.isPlaying()){
				initMediaPlayer();
				status1TextView.setText("Media Player stopped");
				playImageButton.setImageResource(R.drawable.ic_action_play);
			}
			
				
			break;
		case R.id.imageButtonRepeat:
			if(mediaPlayer.isLooping()){
				mediaPlayer.setLooping(false);
				status2TextView.setText("Repeat Off");
			}else {
				mediaPlayer.setLooping(true);
				status2TextView.setText("Repeat On");
			}
			break;
		default:
			break;
		}
		
	}
}

 

activity_main.xml

<LinearLayout 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: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="com.heendher.audioplayer.MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageButton
            android:id="@+id/imageButtonStop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_action_stop" />

        <ImageButton
            android:id="@+id/imageButtonPlay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_action_play" />

        <ImageButton
            android:id="@+id/imageButtonRepeat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/ic_action_repeat" />

    </LinearLayout>

    <TextView
        android:id="@+id/textViewStatus1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" />

    <TextView
        android:id="@+id/textViewStatus2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp" />

</LinearLayout>

 

 

 

Share

You may also like...