attach sound to buttons? #135

Closed
antixian opened this Issue Jan 26, 2013 · 8 comments

3 participants

@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
Owner

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 antixian closed this Jan 26, 2013
@antixian antixian reopened this Jan 26, 2013
@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
Owner

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!

@antixian antixian closed this Jan 26, 2013
@deniro21

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

@Mottie
Owner

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();

        } 
   });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment