0

I been having some issues getting my audio player to work correctly in iOS and Android using the PhoneGap Media plugin through Build 3.1

I have play and stop buttons that work fine but when you hit play there is a slight delay as the audio url loads and it freezes the OS. I can kind of cope with that as its a short delay so I thought I'd pop up a loading icon onscreen.

Ive posted a few time here trying to get the JS to work as im no expert but just now I've realised that there is nothing in my code to check if the audio is actually PLAYING!

The playAudio function loads in the audio and then sets the play button to a stop button. I thought function success() {meant it was playing but it actually means it FINISHED playing.

In my code when the link to the audio is clicked the loader function makes a spinner appear on screen and I thought 'success' would turn the loader off because its loaded when in fact whats happening is the laoder stays on and goes away after the track has finished!

I've realized I need a way of detecting if the track is actually PLAYING!

How do I do that?!?!!

Heres the function:

function loadPlay(src, trackName) {
   loader();
   playAudio(src, trackName);
}

function loader() {
        // make a loader spinner appear as track loads
    $(".loading").addClass("loadingnow");
}

function playAudio(src,trackname) {
    // for Android
    if (audioPlaying === false) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
        }
        media = new Media(src, success, error_error);
        media.play();
        //add playing class so play button is replaced with stop button
        document.getElementById(trackname).parentNode.className="playing";
        audioPlaying = true;
    } else {
        //audio is already playing
    }
}

function success() {
    // track isplaying so remove the stop button put play button back
    $(".playing").removeClass("playing");
    // now track is playing remove the loader spinner
    $(".loading").removeClass("loadingnow");

    audioPlaying = false;
}

function error_error(e) {
    //alert('great error');
    //alert(e.message);
}

function stopAudio() {
    // stop playing track
    if (media) {
        media.stop();
        audioPlaying = false;
    }
}

Heres a link to the PhoneGap Media plugin API: http://docs.phonegap.com/en/3.1.0/cordova_media_media.md.html#Media

Do I need to use this bit?

Media.MEDIA_STARTING = 1;
Media.MEDIA_RUNNING = 2;
Media.MEDIA_PAUSED = 3;
Media.MEDIA_STOPPED = 4;

2 Answers 2

5

From the docs:

The following constants are reported as the only parameter to the mediaStatus callback function.

Media.MEDIA_NONE = 0;
Media.MEDIA_STARTING = 1;
Media.MEDIA_RUNNING = 2;
Media.MEDIA_PAUSED = 3;
Media.MEDIA_STOPPED = 4;

The mediaStatus callback is an optional 3rd callback supplied in your Media constructor...

media = new Media(src, success, error_error, status_change);

function status_change(code) {
    switch (code) :
    case Media.MEDIA_STOPPED : doSomething(); break;
}
0

From what I can tell, ilovett's answer might not work for you, because the doSomething() function will get called in two other cases:

  • When someone stops the music with a media.stop()
  • When the media gets released (media.release()) on android (not sure about others, but iOS wont call it).

the way I'm doing it is setting a variable to make sure that the function is not getting called accidentally.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.