Archive

Archive for the ‘PhoneGap’ Category

Native tick sound on button click with PhoneGap

January 20, 2014 4 comments

PhoneGap is a good framework to build hybrid applications, but for a great usability the devil is in the detail. A difference with native buttons is that HTML5 rendered hyper-links don’t produce a click sound with PhoneGap. Such small difference gives directly 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).

Categories: Cordova, Java, PhoneGap