attach sound to buttons?

[antixian]

i have been trying to attach sound to the buttons on the keyboard but have been unsuccessful since it appends to the body and i cant get the jquery code under the button divs on the page.

i'm trying to add sound to each button similar to this example.
http://css-tricks.com/examples/SoundOnHover/

is it possible? would be really cool if so.
thanks.

[Mottie]

Honestly, I don't think I'll build this into the keyboard because I know of many people that would be annoyed by something like this, me included. So, I made you a demo which also includes a mute button. The mute button can also be added as an action key inside the keyboard, but I was too lazy to go that route. Anyway, here is the clicky demo, and the code:

Start out by adding your hidden audio tag (no controls needed; hidden by css)

<audio preload="auto">
    <source src="audio/beep.mp3"></source>
    <source src="audio/beep.ogg"></source>
    Your browser isn't invited for SUPER DUPER fun audio time.
</audio>

Then we can set up the keyboard like this:

var addClickSound = function (kb) {
    // only need to run this code once per keyboard
    if (!kb.$keyboard.find('.mute').length) {
        var clicky = $('#clicky')[0];
        kb.isMuted = false;
        // add mute button inside keyboard, but outside of the keysets
        $('<button class="mute">mute</button>').appendTo(kb.$keyboard);
        kb.$keyboard.find('.mute').on('click', function () {
            // toggle clicky noise
            kb.isMuted = !kb.isMuted;
            clicky.muted = kb.isMuted;
            $(this).text(kb.isMuted ? 'unmute' : 'mute');
        });
        // target ALL keys for clicky time!
        kb.$allKeys.on('mousedown.audio', function () {
            // play clicky noise
            clicky.pause();
            clicky.play();
        });
    }
};

$('#keyboard').keyboard({
    visible: function (e, keyboard, el) {
        // set up clicky noise after keyboard has been rendered and visible
        addClickSound(keyboard);
    }
});

[antixian]

this is freaking awesome. i agree that having clicking noises most likely will be annoying, but i can see this being useful for special purposes. namely applications used at tradeshows or very limited use for an event. for example i have a keypad with numbers only that unlocks a "safe" or cracks a code etc - client wanted button noises even against my advice...but for the people using this at the event it will add to the experience.

thank you so much for showing me how to do this, i'm very happy and it works like a charmsky! you've made a beautiful and simple to implement keyboard! thanks again!

[antixian]

just another thought? would it be possible to make the accept button have a different sound? how would i go about that?

i couldnt find whatever the accept key is similar to $allKeys so if there is one that'd probably be easy. right now i added another audio tag with id=clicky2. i put this code.

   var addClickSound = function (kb) {
        // only need to run this code once per keyboard

        var clicky = $('#clicky')[0];
        var clicky2 = $('#clicky2')[0];

        // target ALL keys for clicky time!
        kb.$allKeys.on('mousedown.audio', function () {
            // play clicky noise
            clicky.pause();
            clicky.play();
        });
        kb.$keyboard.find('button.ui-keyboard-accept').on('mousedown.audio', function () {
            clicky.pause();
            clicky2.pause();
            clicky2.play();
        });

    };

but now what happens is if you click accept 1st before a regular button it plays both sounds at the same time. if you click a button then the accept it will only play the accept sound. but if you hit accept again it plays both. it only plays the single accept button 1 time as long as you "reset" by hitting some other key first.

[Mottie]

Yeah I forgot to mention that I ended up modifying the click sound from that CSS-Tricks demo. I made it really really short, like less than a second long, so it wouldn't cause the problem seen in that demo.

And in case you needed them, I also forgot to share the click files, since I made that demo use audio URIs: clicks.zip.

So, then to fix the accept button sound, you just need to unbind the first clicky noise function, so you can then bind the new accept sound, like this:

kb.$keyboard.find('button.ui-keyboard-accept').off('mousedown.audio').on('mousedown.audio', function () {

Another method that could have been used, would be to check the class name of the key inside the click function and play the sound accordingly:

        kb.$allKeys.on('mousedown.audio', function () {
            if ($(this).hasClass('ui-keyboard-accept')) {
                clicky2.pause();
                clicky2.play();
            } else {
                // play clicky noise
                clicky.pause();
                clicky.play();
            }
        });

Enjoy! :)

[antixian]

nice fix. first method works great. thanks for your help!

[deniro21]

Hello. How i can attach sound on "Shift" or "Caps" buttons? This buttons return false :((

[Mottie]

Hi @deniro21!

Hmm, well I guess you could also bind to the keyset change event... so after this snippet of code:

// target ALL keys for clicky time!
kb.$allKeys.on('mousedown.audio', function () {
    // play clicky noise
    clicky.pause();
    clicky.play();
});

add this (demo):

// target ALL keys for clicky time!
kb.$allKeys.on('mousedown.audio', function () {
    // play clicky noise
    clicky.pause();
    clicky.play();
});
kb.$el.on('keysetChange.audio', function(){
    clicky.pause();
    clicky.play();
});

[deniro21]

@Mottie, thank you very much. I've done a little differently:

$('#field_for_text').keyboard().on('keyboardChange', function(e, keyboard, el){
        var button_name = keyboard.last.key;
        if( button_name.slice(-4)== "Caps" || button_name.slice(-4)== "hift"  ) {

            var audio = $("#lock_sound")[0];
            audio.pause();
            audio.currentTime = 0;
            audio.play();

        } 
   });

[celimun]

HI.i´m celina from argentina ! i have this code....not working
please help me ! i want to listen to sound . when the mouse is over a animated gif...
i try first with a jpg. and not working. thanksss... celina

[Mottie]

Hi @celimun!

That really isn't related to the keyboard, but I think all you need to do is:

• Load jQuery

  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

• Wrap all your code inside a document ready function

  $(function(){
      // add your javascript here
  });

The next time you have a question, please try asking it on Stackoverflow.

[celimun]

jaja Im writtin you ! before i read this

2016-09-06 20:16 GMT-03:00 Rob Garrison notifications@github.com:

Hi @celimun https://github.com/celimun!

That really isn't related to the keyboard, but I think all you need to do
is:

Load jQuery

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

Wrap all your code inside a document ready function

$(function(){
// add your javascript here
});

The next time you have a question, please try asking it on Stackoverflow
http://stackoverflow.com/questions/tagged/javascript.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#135 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVBK0RG54EqGumgyKq3KUX08T5OU6PVmks5qnfROgaJpZM4AYuBT
.

[celimun]

I copy this:
http://codepen.io/anon/pen/GjgamW

because i dont know nothing of java

2016-09-06 20:21 GMT-03:00 celina mundet celinamundet@gmail.com:

jaja Im writtin you ! before i read this

2016-09-06 20:16 GMT-03:00 Rob Garrison notifications@github.com:

Hi @celimun https://github.com/celimun!

That really isn't related to the keyboard, but I think all you need to do
is:

Load jQuery

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

Wrap all your code inside a document ready function

$(function(){
// add your javascript here
});

The next time you have a question, please try asking it on Stackoverflow
http://stackoverflow.com/questions/tagged/javascript.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#135 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVBK0RG54EqGumgyKq3KUX08T5OU6PVmks5qnfROgaJpZM4AYuBT
.

[Mottie]

I think you mean javascript, Java is a different language.

The demo on CodePen works because the javascript is at the bottom of the page, so the document ready function wrapper isn't needed; but it is needed in the code you shared because the script is above the <body>.

Try this demo... it shows everything you need.