Over a million developers have joined DZone.

How to Create the Native Tick Sound on Button Click with PhoneGap

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

PhoneGap is a good framework to build hybrid applications, but for great usability the devil is in the details. A difference with native buttons is that HTML5 rendered hyper-links don’t produce a click sound with PhoneGap. Such small difference gives a non-standard user experience to your app. So I came up with a small PhoneGap plug-in to fix this small annoyance.

Java code:

public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
    if("click".equals(action)) {
        try {
            cordova.getActivity().runOnUiThread(new Runnable(){
                public void run(){
                    try {
                        View view = cordova.getActivity().getWindow().getDecorView();
                        view.playSoundEffect(SoundEffectConstants.CLICK);
                    }
                    catch(Exception ex) {
                        callbackContext.error(ex.getMessage());
                    }
                }
            });
        }
        catch(Exception ex) {
            callbackContext.error(ex.getMessage());
        }
 
        return true;
    }
 
    return false;
}

JavaScript code:

$(function() {
    $(document).on("click", ".sound-click", function() {
        cordova.exec(function () { },
                    function () { },
                    "SoundEffects",
                    "click",
                    []);
    });
});

In order to have the click sound, it it sufficient to add the “sound-click” class to your HTML5 buttons (and jQuery referenced in your page).


Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Pieter De Rycke, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}