Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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).


Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

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 }}