Android Apps

Using native media player for Android App with progress bar – Android Phonegap App

July 25, 2012 by Sarath DR in Android Apps, Featured with 1 Comment

When I converted a mobile web app to android phonegap application there was some problem with playing mp3 files.The webkit version does not support html5 and flash player. So I have used phonegap media player api to play mp3 files. If you use the below code there will be a minor delay if your mp3 is in a different server.
Step 1: Here I am using an anchor button to play and stop the media.

 
<a class="play-button-a" href="http://your-url-to-the-file/my.mp3">&nbsp;</a>

Step 2: Handle the click event of the play button.

 
$('.play-button-a').live('click', function(e) {
 
                    e.preventDefault();
                    e.stopPropagation();
                    if( checkConnection() )
                    {
                        if( $(this).parent().hasClass('stop-button') )
                        {
 
                            $('.stop-button').removeClass('stop-button');
 
                            // Will be written in the next step 
                            stopAudio();
 
                        }
                        else
                        {                         
                            $('.stop-button').removeClass('stop-button');
                            $(this).parent().addClass('stop-button');
 
                            // Play audio function will be written in the next step 
                            playAudio( $(this).attr('href') );
                        }
                    }
 
     });

Step 3: Phonegap api to play Audio

var my_media = null;
        var mediaTimer = null;
        var playing = false; 
 
        // Play audio
        //
        function playAudio(src) {
            // Create Media object from src
            if( my_media != null )
            {
 
                    my_media.stop();
                    my_media.release();
                    clearInterval(mediaTimer);
                    mediaTimer = null; 
                    my_media = null;
                    playing = true; 
            }
 
 
 
            my_media = new Media(src, onEnd, onError);
 
            // Code to find out the duration of the file
            var duration = 0;
            var counter = 0;
            var timerDur = setInterval( function() {
                counter = counter + 100;
                if (counter > 2000) {
                    clearInterval(timerDur);
                }
                var dur = my_media.getDuration();
                if (dur > 0) {
                    clearInterval(timerDur);
                   duration = dur; 
                }
           }, 100);
 
 
            // Play audio
            my_media.play();            
 
 
 
            // Update my_media position every second
            if (mediaTimer == null) {
 
 
                mediaTimer = setInterval(function() {
                    // get my_media position
                    my_media.getCurrentPosition(
                        // success callback
                        function(position) {
                            if (position > 0 ) {
 
 
                             //  alert( position );
                                // Get the current position of the video 
                                percentage = position/duration ;
                                percentage = percentage * 100;
                                playing = false;
 
                               // Increase the progress bar width  
                               if( $('.progressinternal').length > 0 )
                                {
                                    $('.progressinternal').css('width', percentage +'%');
 
                                }
 
 
                            }
                        },
                        // error callback
                        function(e) {
                            console.log("Error getting pos=" + e);
                           // setAudioPosition("Error: " + e);
                        }
                    );
                }, 1000);
            }
        }
 
 
 
 
 
         // onSuccess Callback - Called when the playing ends 
        function onEnd() {
 
            if( my_media && playing == false )
            {
 
                $('.stop-button').removeClass('stop-button');
                $('.progressinternal').css('width', '3%');
                my_media.release();
            }
 
 
        }

Step 4: Stop the Audio

 
         function stopAudio() {
            if (my_media  ) {
                my_media.stop();
                my_media.release();
            }
            clearInterval(mediaTimer);
            playing = false; 
            mediaTimer = null;
            my_media = null;
            if( $('.progressinternal').length > 0 )
            {
                $('.progressinternal').css('width', '3%');
 
            }
        }
 
   // onError Callback
        //
        function onError(error) {
            return;
        }

Tagged , , ,

Share this to

Related Posts

One Comment

  1. franciscoJun 8, 2013 at 5:00 amReply

    thank you! Might spend the example to download, please, thanks for the input!

Leave a reply

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

*

About
View Sarath D R's profile on LinkedIn

I am a technology consultant and an entrepreneur focused on the following technologies Java,Spring, Android, Angular, Asterisk, Symfony, Cake , Code-Igniter, Jquery , XAMPP, XHTML, AJAX, MySql, Seo, Web Design, Wordpress, iPhone development.

Today’s Tips
  • Generate Codova.jar file from Phonegap project using ant
  • Google map javascript client  to find the geographic co-ordinates  from  Address or post code
  • Update Android main UI from Webview – Phonegap Plugin
  • Jplayer is not working  with HTC One Android 4.3 version browser
  • Regular expression to validate mobile phone numbers starting with + ( plus ) – php
  • Simple pagination script for PHP
  • Useful adb ( Android Debug Bridge ) commands
  • Change the javascript files url to absolute url – Symfony 1.4
  • Set Http authentication header from Client – PHP / CURL

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.This site also uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies.

Close