How to Create the Native Tick Sound on Button Click with PhoneGap
Join the DZone community and get the full member experience.
Join For FreePhoneGap 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).
Published at DZone with permission of Pieter De Rycke, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments