Aplikasi Simple Murottal

Implementations of Media Player

Aplikasi Simple Murottal

Tujuan
Membuat aplikasi pemutar audio sederhana yang bisa memutar audio
murottal.mp3 diantaranya beberapa surah yang tersedia dalam folder assets.
Materi
- Splashscreen
- Class Media Player
Tutorial
Ada beberapa cara untuk memutar audio / video pada android baik itu berupa
file ataupun stream. Pada tutorial ini kita akan menerapkan metode class Media
Player untuk pemutaran audio.
Panduan dan pembahasan lengkap mengenai class media player bisa anda
dapatkan di official site android developer berikut:
http://developer.android.com/reference/android/media/MediaPlayer.html
Di sini kita akan langsung membahas bagaimana menerapkan metode tersebut
pada real aplikasi. Pertama kita membutuhkan tampilan layout dengan
beberapa palette button untuk menjalankan audio tersebut menggunakan
OnClickListener namun sebelum itu kita akan membuat splashscreen sederhana
yang akan di munculkan sebelum masuk pada activity pokok aplikasi.
Untuk splashscreen kita membutuhkan satu layout.xml, disini saya beri nama
activity_splash dengan beberapa properti seperti di bawah.

splash_activity.xml
<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"
tools
:
context
=
"${relativePackage}.${activityClass}"
android
:
background
=
"@drawable/splash">
<ProgressBar
android
:
id
=
"@+id/loading"
android
:
layout_width
=
"wrap_content"
android
:
layout_height
=
"wrap_content"
android
:
layout_alignParentLeft
=
"true"
android
:
layout_alignParentTop
=
"true"
android
:
layout_marginLeft
=
"102dp"
android
:
layout_marginTop
=
"184dp"
/>
</RelativeLayout>

Pada kode diatas adalah tampilan splashscreen android, launcher saat pertama
kali aplikasi di jalankan maka akan muncul circle progress dialog loading dengan
menampilkan background bernama splash yang ada pada folder drawable.
Seperti berikut.

Sedangkan untuk class java pada pada tampilan diatas ada pada Splash.java
berikut syntax nya.
Splash.java
packageid
.
creatorb
.
simplemurottal;
importandroid
.
app
.
Activity;
importandroid
.
content
.
Intent;
importandroid
.
os
.
Bundle;
importandroid
.
os
.
Handler;
public
class
Splash
extends
Activity{
//set durasi loading splash, hold selama 10 detik
private
final
intDURASI_SPLASH
=
10000;
@Override
protected
voidonCreate
(
BundlesavedInstanceState
){
super
.
onCreate
(
savedInstanceState
);
setContentView
(
R
.
layout
.
activity_splash
);
//new handler untuk memulai activity berikutnya
new
Handler
().
postDelayed
(
new
Runnable
(){
@Override
public
voidrun
(){
//intent untuk berpindah menuju activity selanjutnya
Intentbe
=
new
Intent
(
Splash
.
this
,
MainActivity
.
class
);
startActivity
(
be
);
//tutup activity setelah berjalan
finish
();
}
},DURASI_SPLASH
);
}
}

Beberapa penjelasan pendek sudah saya sisipkan sebagai komen pada class
diatas, dimana class diatas terhubung pada layout activity_splash dan
menjalankan beberapa method untuk meng hold proses activity Splash selama
10 detik dan nantinya activity tersebut di akhiri saat waktu habis pada proses
tersebut dan nantinya proses aplikasi akan dialihkan pada class MainActivity.
.

Sedangkan tampilan class MainActivity ada pada activity_main.xml berikut:

<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
:
background
=
"@drawable/wallpaper"
android
:
orientation
=
"vertical"
android
:
gravity
=
"center"
tools
:
context
=
"${relativePackage}.${activityClass}">
<ImageView
android
:
id
=
"@+id/basmalah"
android
:
layout_width
=
"200dp"
android
:
layout_height
=
"wrap_content"
android
:
src
=
"@drawable/basmalah"
/>
<LinearLayout
android
:
layout_width
=
"match_parent"
android
:
layout_height
=
"wrap_content"
android
:
orientation
=
"vertical"
android
:
gravity
=
"center"
android
:
layout_marginBottom
=
"130dp">
<Button
android
:
id
=
"@+id/i"
android
:
layout_width
=
"wrap_content"
android
:
layout_height
=
"wrap_content"
android
:
text
=
"Al - Ikhlas"
android
:
textColor
=
"#3090C7"
android
:
textStyle
=
"bold"
/>
<Button
android
:
id
=
"@+id/f"
android
:
layout_width
=
"wrap_content"
android
:
layout_height
=
"wrap_content"
android
:
text
=
"Al - Falaq"
android
:
textColor
=
"#3090C7"
android
:
textStyle
=
"bold"
/>
<Button
android
:
id
=
"@+id/n"
android
:
layout_width
=
"wrap_content"
android
:
layout_height
=
"wrap_content"
android
:
text
=
"An - Naas"
android
:
textColor
=
"#3090C7"
android
:
textStyle
=
"bold"
/>
</LinearLayout>

</LinearLayout>

Beberapa properti yang dipakai pada layout diatas diantaranya imageview untuk
menampilkan gambar basmalah dan selebihnya adalah background untuk layout
itu sendiri ada pada drawable/wallpaper, dan beberapa lainnya adalah button
dengan beberapa id unik i untuk surat al-ikhlas, f untuk al-falaq dan n untuk
surah an-naas yang nantinya id tersebut di pakai pada class MainActivity.
Tampilan grafiknya seperti dibawah ini.

Sedangkan untuk class java pada tampilan layout diatas ada pada
MainActivity.java
packageid
.
creatorb
.
simplemurottal;
importjava
.
io
.
IOException;
importandroid
.
app
.
Activity;
importandroid
.
content
.
res
.
AssetFileDescriptor;
importandroid
.
media
.
MediaPlayer;
importandroid
.
os
.
Bundle;
importandroid
.
util
.
Log;
importandroid
.
view
.
Menu;
importandroid
.
view
.
View;
importandroid
.
view
.
View
.
OnClickListener;
importandroid
.
widget
.
Button;
public
class
MainActivity
extends
Activity
implements
OnClickListener{
private
Buttoni
,f
,n;
private
MediaPlayermp;
@Override
protected
voidonCreate
(
BundlesavedInstanceState
){
super
.
onCreate
(
savedInstanceState
);
setContentView
(
R
.
layout
.
activity_main
);
//deklarasi
//surat al ikhlas
i
=
(
Button
)
findViewById
(
R
.
id
.
i
);
i
.
setOnClickListener
(
this
);
//surat al falaq
f
=
(
Button
)
findViewById
(
R
.
id
.
f
);
f
.
setOnClickListener
(
this
);
//surat An - naas
n
=
(
Button
)
findViewById
(
R
.
id
.
n
);
n
.
setOnClickListener
(
this
);
}
@Override
public
voidonClick
(
Viewv
){
// penyesuaian id button dengan mp3 yang akan dijalankan
if
(
v
.
getId
()==
R
.
id
.
i
){
putar
(
"i.mp3"
);
}
else
if
(
v
.
getId
()==
R
.
id
.
f
){
putar
(
"f.mp3"
);
}

else
if
(
v
.
getId
()==
R
.
id
.
n
){
putar
(
"n.mp3"
);
}
}
private
voidputar
(
String
Murottal
){
BooleanmurottalStatus
=
false;
//cek murottal status
try{
murottalStatus
=
mp
.
isPlaying
();
}
catch
(
Exceptionb
){
murottalStatus
=
false;
}
//jika status mp3 murottal dalam keadaan berjalan
if
(
murottalStatus
==
true
){
//maka hentikan mediaplayer
mp
.
stop
();
//dan hapus dari memory
mp
.
release
();
}
else{
try{
mp
=
new
MediaPlayer
();
AssetFileDescriptorM
=getAssets
().
openFd
(
Murottal
);
//set source murottal
mp
.
setDataSource
(
M
.
getFileDescriptor
(),M
.
getStartOffset
(),
M
.
getLength
());
mp
.
prepare
();
//siapkan untuk playback
mp
.
start
();
// putar murottal
M
.
close
();
// file descriptor
}
catch
(
IOExceptionb
){
//cek error debug
Log
.
i
(
"Error Murottal: "
,b
.
toString
());
}
}
}
}

Dua class dan tampilan diatas merupakan inti pokok dalam aplikasi ini,
sedangkan untuk kelengkapan source dalam pembuatan aplikasi ini telah saya
upload di github anda bisa mengunduh nya di link pada menu reference.
Sekian tutorial ini, semoga bermanfaat, terimakasih.

Reference.
Source Code
:
https://github.com/pondokprogrammer/mobile-dev/tree/master/android/Andr
oid-Audioplayer-Murottal
Demo Video
:
https://www.youtube.com/watch?v=Knx7Xm7rgAo