PhoneGap (JS) - multiple audio streams

Question

I've been using this code from the PhoneGap documentation (http://docs.phonegap.com/en/2.3.0/cordova_media_media.md.html#media.play) to play audio files:

    // Audio player
    //
    var my_media = null;
    var mediaTimer = null;

    // Play audio
    //
    function playAudio(src) {
        if (my_media == null) {
            // Create Media object from src
            my_media = new Media(src, onSuccess, onError);
        } // else play current audio
        // Play audio
        my_media.play();

    // Stop audio
    // 
    function stopAudio() {
        if (my_media) {
            my_media.stop();
        }
        clearInterval(mediaTimer);
        mediaTimer = null;
    }

So I can playback audio with an onclick event:

playAudio('http://example.com/file.mp3');

And stop it:

stopAudio();

That's working fine, but I want to play multiple streams and control them by a parameter, "name".

So I changed my code:

    // Audio player
    //
    var my_media = null;
    var mediaTimer = null;

    // Play audio
    //
    function playAudio(name,src) {
        if (my_media == null) {
            // Create Media object from src
            my_media = new Media(name, src, onSuccess, onError);
        } // else play current audio
        // Play audio
        my_media.play(name);

    // Stop audio
    // 
    function stopAudio(name) {
        if (my_media) {
            my_media.stop(name);
        }
        clearInterval(mediaTimer);
        mediaTimer = null;
    }

// Play and stop file 1: playAudio('file1','http://example.com/file.mp3');

stopAudio('file1');

// Play and stop file 2:

playAudio('file2','http://example.com/file2.mp3');

stopAudio('file2');

---

The only thing I'm receiving is a crash of the application, does anyone have experiences with playing multiple media files on PhoneGap?

Thanks!

Answer 1

Based on Cordova 2.3 documentation:

The Media object constructor is expecting the first parameter to be 'src' but you are using it to set the name of the media the player than treats your name as the media source and tries to use 'file1' as the path to the media file

Additional: The phonegap Media play() and stop() methods don't expect a parameter so the name you provide in those method calls will be ignored

You could Try creating a 2 dimensional array of media players where the first element in each row is the name and the second is the Media object. Than in your playAudio and stopAudio functions scan the array by name and call the play() and stop() methods on the correct object

Before copying and pasting the code below please remember I am not at all sure playback of multiple audio files is possible in phonegap. I know it's NOT supported in mobile safari audio element: http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf#page21

var my_medias = new Array();
...
playAudio(name,arc){
    var createnew = true;
    for(var i=0;i<my_medias.length;I++){
        if(my_medias[0]==name){
            my_medias[1].play();
            createnew=false;
        }
    }
    if(createnew){
        my_medias.push([name,new Media(src,onError,onSuccess)]);
    }
}

stopAudio(name){
    for(var i=0;i<my_medias.length;I++){
        if(my_medias[0]==name){
            my_medias[1].stop();
        }
    }
...

}

Answer 2

i'm newbie in phonegap and i also want to play multiple media files like you. this is my solution and it work for me.

var mediaObjects;
var currentSound;

// where list is an array of sound name like this ['foo.mp3', 'bar.mp3']
function playSound(list){
    mediaObjects = [];
    currentSound = 0;
    for(var i = 0; i< list.length; i++){
        var mediaObject = new Media('/android_asset/www/sounds/' + list[i], onSuccess, onError);
        mediaObjects.push(mediaObject);
    }
    mediaObjects[0].play();
}

after first media object played. callback function 'onSuccess' will be called and this is function's code

function onSuccess() {
    currentSound++;
    if(mediaObjects.length <= currentSound){
        return;
    }
    mediaObjects[currentSound].play();
}

this code may be not best but it work ( for me ) and sorry for my english hope this help! :)

Answer 3

You can add

window.location.reload();

in stopAudio(), it is work to play multiple audio

function stopAudio() {
    if (my_media) {
        my_media.stop();
        window.location.reload();
    }
    clearInterval(mediaTimer);
    mediaTimer = null;
}