Native button sounds

ionic-v1
1

The buttons in my app make no sounds. The Android back button and keyboard makes it’s native sound. For example, I would love to have the ion-nav-back-button make the same sound as the Android device back button.

What is the recommended way to add native sounds to buttons?

Quick Google search gives me, here

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

});

2

You can call a function on hardware back button

$ionicPlatform.onHardwareBackButton(function(){
var soundfile = new Media(“assets/path_to_file”);
soundfile.play();
soundfile.release();
})

3

Hi everyone, sorry if i’m reviving a super old post but I just had the same necessity, so I made a small cordova plugin that works on Android (based on the blogpost).

It lets you specify an array of class strings that you want to be “clicky” and when a click event it’s triggered on the class, you will hear the device’s native click sound.

You can find it here:

Native Click Sound Cordova Plugin For Android

I’ve only tested it on my Nexus 5, so if anyone wants to give it a try, any feedback it’s appreciated :smile:

2 Likes
4

Hi Mati,

this is exactly what I was looking for. It works perfekt with my Android Device (sony xperia z3 compact). Thanks for that :slight_smile:

Just one question. So now I made all „Buttons“ make the click sound. But I really would like to have that Clicksound also on "ion-items“ with a „href“. Here an example:

    <ion-item class="item item-icon-left" menu-close href="#/app/cat_list" >
      <i class="icon ion-ios-book"></i>
        Klick Me with a clicky sound       
    </ion-item>

So I don’t know how to configure your plugin in that case, since I don’t use buttons here. Any suggestions?

EDIT:

I just found the solution by myself. Since “ion-item” creates and “a” tag with an href, I just needed to add the “a” “class” to your configuration. So it is:

var clickyClasses = ['sound-click', 'button', 'a']; 
nativeclick.watch(clickyClasses);
5

Hi i3i2ain, I’ve made a small update on the plugin. Now you can trigger the click sound manually.

For example, for your case you can do:

<ion-item ng-click="clickSound()">
    Click me with a clicky sound       
</ion-item>

And in the controller:

$scope.clickSound = function () {
    nativeclick.trigger();
}

Glad you find a solution anyway! :slightly_smiling:

6

Nice work! Plug and play

7

How can i added this into controller? here is my code

.controller('AppClickCtrl', function($ionicPlatform,$scope) {

 $scope.changeStatus = function(){
    nativeclick.trigger();
  }
})
8

Hi,
how do i had cordova-plugin-nativeClickSound in a Ionic project, please ? I mean after installation.

Thank you.

9

Got it. Works fine.
Thanks for the plugin :slight_smile:

10

Hi -

You mentioned that you got it working in Ionic. Would you mind sharing how you did that?

Was it Ionic2?

Thanks in advance.

Matt

11

Hi,
it was Ionic 1. Still interested ?

12

I’m working in version 2 so don’t go to any trouble, unless you think what you learned is readily applicable. I don’t know version 1 so I’m not in any position to say.

Thanks for getting back to me.
Matt