Memberi Audio Untuk Aplikasi Phonegap

html5 audio logoSebelum artikel ini saya tulis, ternyata Phonegap maupun aplikasi berbasis HTML5 pada umumnya mempunyai permasalahan yang cukup memusingkan kepala developer terkait isu audio Cross Browser HTML5. Beberapa sumber menyebutkan bahwa pemasangan audio pada aplikasi Phonegap terutama untuk Android masih memiliki problematika di bagian looping.

Meskipun demikian Andrew Trice bisa mengakalinya dengan membuat sebuah plugin LowLatencyAudio. Namun, dalam tutorial ini saya belum sampai mengaplikasikan plugin tersebut karena belum sempat mencobanya. Sebelum itu, saya akan memberikan tutorial yang cukup mudah untuk menyisipkan sebuah audio ke dalam aplikasi Phonegap.

1Siapkan File Audio

Langkah pertama, buat project sederhana dan persiapkan file audio untuk kita masukkan ke dalam folder assets/www. Pembaca dapat menggunakan file audio yang telah saya sertakan pada artikel Android Audio Background berbasis Java pada tutorial sebelumnya, disini. Setelah mendapatkan file audio tersebut, silahkan copy ke project Phonegap Anda.

Letak File Audio

Letak File Audio

Di screenshot bisa pembaca lihat, saya meletakkan file my_audio.ogg ke dalam folder assets/www.

2Buat script Index.js

Script ini akan kita include ke header index.html dan berfungsi sebagai pengontrol utama aplikasi Audio Phonegap kita. Tidak begitu kompleks dan sangat sederhana, silahkan ketik script berikut dan letakkan ke dalam folder /assets/www/apis atau folder lain di dalam root www.

    // fungsi onload utama aplikasi berupa fungsi onDeviceReady
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}

// fungsi onDeviceReady yang dipanggil oleh onLoad()
function onDeviceReady() {
    // alert
    alert("Audio Background by Mkhuda.com");

    // membuat variabel myMedia
    myMedia = new Media("/android_asset/www/my_sound.ogg");

    // memutar audio dari variabel myMedia
    myMedia.play();
}

Bisa pembaca lihat dari kode di atas kita membuat variabel Media yang saya beri nama myMedia. Variabel ini merupakan fungsi standar dari Phonegap dan aplikasi HTML5 untuk memanggil file audio. Setelah variabel terdefinisikan, lanjutkan dengan memanggil fungsi play(), myMedia.play().

Perhatian ! Fungsi audio ini sebenarnya berjalan baik di platform Android, namun ada satu yang mengganjal ! yaitu kita tidak bisa melakukan looping audio semudah pada aplikasi Android berbasis Java. Menurut sumber yang cukup terpercaya, penambahan audio dengan metode seperti ini beserta fungsi loopingnya akan berjalan baik di platform iOS / iPhone.

Untuk iOS, Silahkan sisipkan kode berikut untuk melakukan looping beberapa kali pada Audio kita.

var myMedia = new Media("/android_asset/www/my_sound.ogg");
myMedia.play({ numberOfLoops: 2 });

Karena penulis tidak memiliki ponsel berbasis iOS, pembaca bisa mencobanya sendiri menggunakan ponsel iPhone.

3Script index.html

Karena kita sudah menuliskan script index.js di atas, pembaca cukup melakukan include di header index.html, sesudah script cordova tentunya. Berikut adalah script index.html :

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title></title>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
  </head>

<body onload="onLoad();">
<script type="text/javascript" charset="utf-8" src="apis/index.js"></script>			
  </body>
</html>

Silahkan run program Phonegap Anda dari Eclipse, dan dengarkan file audio kita. Selamat mencoba ! 😀

 
Muhammad K Huda

Muhammad K Huda

A non exhausted blogger person within fullstack engineer (spicy food), open source religion, self-taught driver and maybe you know or don't like it. Simply says, Hello from Me!

 

One thought on “Memberi Audio Untuk Aplikasi Phonegap

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaptcha * Time limit is exhausted. Please reload CAPTCHA.