Add click noise to buttons

Question

I've got 3 divs on my site and each one of them is a page to display like a photoslide. Please see functions and code here: http://jsfiddle.net/jasper/EXfnN/29/

Now I need to add some button noise on the second page, for example there should be a click noise everytime when the ABC/National/Other link is clicked. How can I add a click noise to the buttons?

A proper Firefox addon would work, as this site is for a kiosk not for public. However I tried Firefox Noise Addon, but it is only working when a link is linking to a different page, but not when the link is on the same page like my situation.

Is there any way I can add a button noise to each button clicked on the second page? If so how can I do it? Any code/examples/tutorials would be great help.

Thanks in advance.

Edit: Thanks for all your reply. I'm half way there with your help. At the moment there is an email submit function as well slide the page to the next when a button is clicked.

Is it possible for someone to mix those useful code below with my function here please? A bit lost with one click function but two events (sound and submit an email) Thanks!

Here is the additional email submit js.

function abcSubmit() {
$.ajax({
    type: "POST",
    url: "email.php", 
    data: "abc=abc", 
});
}

function nationalSubmit() {
$.ajax({
    type: "POST",
    url: "email.php", 
    data: "national=national", 
});
}

function otherSubmit() {
$.ajax({
    type: "POST",
    url: "email.php", 
    data: "other=other"
});
}

and email.php is like

if(isset($_POST['abc']))
{ 
$to      = 'abc@site.com';
$subject = 'Entrance notice';
$message = 'Hello ABC.';
$headers = 'From: webmaster@example.com' . "\r\n" .
    'Reply-To: webmaster@example.com' . "\r\n" .
    'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);

}

Dont expect all your users to install those addons which helps to hear the sound — Shyju, Mar 26 '12 at 02:20
Hi Shyju, thanks for your fast response, a firefox addon would work as i forgot to mention this is for a kiosk screen not a public website. Any idea how to add a click sound? Thanks. — grumpypanda, Mar 26 '12 at 02:21
possible duplicate of [Cross-platform, cross-browser way to play sound from Javascript?](http://stackoverflow.com/questions/187098/cross-platform-cross-browser-way-to-play-sound-from-javascript), see also http://stackoverflow.com/questions/450033/playing-sound-notifications-using-javascript — Wesley Murch, Mar 26 '12 at 02:23
By the way, I know it's not the point, but when a web page unexpectedly starts taking over my speakers I usually leave immediately. — Wesley Murch, Mar 26 '12 at 02:29

Elliot Bonneville · Answer 1 · 2012-03-26T02:29:02.913

0

Playing sounds in Javascript.

Relevant quote:

In Firefox, Safari, and Google Chrome the audio playback functionality relies on plugins such as Apple QuickTime. With the audio plugin(s) installed, you will need an OBJECT tag for the browser to activate the plugin. Here is an example of an OBJECT tag:

<OBJECT DATA="audioURL.mid" TYPE="audio/midi" TITLE="Description" WIDTH=250 HEIGHT=20>   
<PARAM NAME=autostart VALUE=true>       
<PARAM NAME=hidden VALUE=false> </OBJECT>

You can also play sounds using Flash with plugins like the SoundManager project.

edited Mar 26 '12 at 02:29

answered Mar 26 '12 at 02:23

Elliot Bonneville

51,872
23
96
123

Please provide the relevant content instead of just-a-link. You may quote your source verbatim, as you have already given attribution. The idea of this site is to have the answer *here*, not elsewhere. I've played the link-chasing game too many times, it is not fun. – Wesley Murch Mar 26 '12 at 02:24

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

Here is some code to load audio, just tie the sound into your button click. Cross-platform, cross-browser way to play sound using jQuery 1.4?

<audio id="soundHandle" style="display: none;"></audio>
<script>
  soundHandle = document.getElementById('soundHandle');
  soundHandle.src = '/blah/blah.mp3';
  soundHandle.play();
</script>

edited May 23 '17 at 12:20

Community

1
1

answered Mar 26 '12 at 02:24

user1289347

2,397
1
13
16

hi @usr1289347 and Blender, thanks for your response, I gave your code a try, it plays the sound when page load, i'm half way there, thanks. An email is sent and the page slides to the next page when an onclick="nameSubmit()" function/button is clicked at the mo. How can i mix your code with my existing functions together pls? Ive added my submit code above. Thank you! – grumpypanda Mar 26 '12 at 03:23

score 0 · Accepted Answer · answered Mar 26 '12 at 02:27

0

You could use the new HTML5 audio tag to play sounds. Here's a sample (it preloads and allows one sound at a time. Works in most browsers).

<input type="button" onclick="playSound()" value="Click me!" />

<script>

    var sound = document.createElement("audio");

    var src = document.createElement("source");
    src.src = "sound.wav";
    sound.appendChild(src);
    //More srcs...

    sound.load();
    sound.volume = 0;
    sound.play();

    function playSound() {

        sound.volume = 1;
        sound.currentTime = 0.01;
        setTimeout(function(){sound.play();},1);

    }

</script>

Also... don't play sounds if the user doesn't expect it ;)

answered Mar 26 '12 at 02:27

Jeffrey Sweeney

5,986
5
24
32

Hi Jeffrey, thanks for your response. i just give your code a try, the sound is playing when the button is clicked, thanks, but I need to tell the button to submit an email and slide to next page like my code here http://jsfiddle.net/jasper/EXfnN/29/ How can keep the same function and make the sound work? Thanks very much:) – grumpypanda Mar 26 '12 at 03:08
Also please see additional code for the onclick="abcSubmit()" function above. How can i mix your code with my existing code? Any direction/help is appreciated. thank you. – grumpypanda Mar 26 '12 at 03:21
@SamIAm the `onclick` function can execute more than one function. For example: `onclick="playSound();submitEmail();slide();` – Jeffrey Sweeney Mar 26 '12 at 13:31

Add click noise to buttons

3 Answers3