[support-michael]

Background Audio with Auto-start (native apps only)

Project src code is attached to end of this article.

We have received lots of feedback from the original Background Audio demo. One of the requests has been for auto-start of the audio such that a user does not have to click a Play button to initiate audio playback. In the original article we shared that for iOS webapps do not support the auto-start option of the audio player. In this demo we use the Cordova (PhoneGap) Media api to implement auto-start for iOS and Android apps.
See attachment background-audio.png
NOTE-1: Cordova apis (e.g., Media) will only operate in a native application context. Thus you can not test your in the MobiOne Test Center or a general webkit browser such as Chrome due to the native app requirement. MobiOne 2.5 (soon to be released) provides a new test environment known as the Mobile Web Simulator that provides emulation of many of the Cordova/PhoneGap apis.

NOTE-2: We are investigating how we might provide background audio with auto-start through the Visual Designer. We will share more details if we move forward with this idea.

The design of this app is really simple. In our Cordova deviceready event handler (all of the code is listed below) we start audio playback using the Cordova Media api. There is one little twist that involving the URL to the test.mp3 audio file that is included in the project. On iOS the URL is a simple relative URL, “test.mp3”. On Android the URL is file:///android_assets/www/test.mp3. Here’s the code to make the platform specific adjustments using the Cordova device.platform property to detect if the app is on an iOS or Android device.

//NOTE: the example app uses the Cordova/PhoneGap Media api
// It will only function when built as native app and run
// on an iOS or Android device.

/**
 * Called when document is loaded. Register cordova/phonegap deviceready handler
 */
phoneui.documentReadyHandler = function() {
    document.addEventListener("deviceready", initAndPlayAudio, false);
}

var AUDIO_FILE = "test.mp3";
var ANDROID_URL_ROOT = "file:///android_asset/www/";
var player;

//Create an audio player and start the play operation
function initAndPlayAudio() {        
    var audioUrl = 
        device.platform == "Android" ? 
            ANDROID_URL_ROOT + AUDIO_FILE : //Media api on Android platform requires an absolute URL
            AUDIO_FILE
    initAudio(audioUrl);
    playAudio();
}

function initAudio(url) {
    player = new Media(url,
            // success callback
            function () {
                console.log("playAudio():Audio Success");
            },
            // error callback
            function (err) {
                alert("playAudio():Audio Error: " + err);
            }
        );
}

function playAudio() {
    player.play();
}

function stopAudio() {
    player.stop();
}

Src Code

Attachments:

You must be logged in to view attached files.

[Author]

Posts