Native button sounds


#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:


#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