# How to have the browser play a clicking noise when a button is pressed?

**URL:** https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362
**Category:** Dashboard
**Created:** [19 January 2021 00:17 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362 "2021-01-19T00:17:58Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![kpc](https://avatars.discourse-cdn.com/v4/letter/k/ad7895/32.png) [@kpc](https://discourse.nodered.org/u/kpc)
#### Post date: [19 January 2021 00:17 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/1 "2021-01-19T00:17:58Z")

</div>

I have my dashboard tablet mounted on a wall, and found that it's pretty easy to "mis-click" by accidentally dragging my finger when I'm trying to hit a button; in this case the button press is silently dropped. I'd like to add an audio feedback sound effect to each button, just something simple like the Android key click sound effect, to confirm to the user that Node-RED received the button press event: [data/sounds/effects/KeypressStandard.wav - platform/frameworks/base - Git at Google](https://android.googlesource.com/platform/frameworks/base/+/8f6f1f4/data/sounds/effects/KeypressStandard.wav)

I see that there is an "audio out" node in the dashboard module, but that only seems to do text-to-speech. Likewise, I found [GitHub - lorentzlasson/node-red-contrib-play-audio](https://github.com/lorentzlasson/node-red-contrib-play-audio) but the only example in that package is also for TTS, nothing that shows how to just play a .wav file served up from the Node-RED static assets directory.

Any ideas?

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [19 January 2021 07:55 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/2 "2021-01-19T07:55:57Z")

</div>

There is couple of examples discussed on topic "how to play audio files"

> [@How to play audio file in browser / on Windows PC?](https://discourse.nodered.org/t/how-to-play-audio-file-in-browser-on-windows-pc/37516):
>
> Hello, I'm pretty new to node-red, so maybe the solution is obvious, but I can't figure it out. I was hoping to be able to trigger a sound on my computer (doesn't matter if it's in my browser or through other means) using node-red, but I can't find how to get it to work. I tried node-red-contrib-play-audio-file and node-red-contrib-play-sound, but I couldn't find how I'm supposed to trigger play-sound, and for play-audio-file I get "INFO: Could not find files for the given pattern(s)." (Maybe th…

But also may be the vibrate can do the trick for you  
[Dashboard buttons easy colour state change? - #49 by hotNipi](https://discourse.nodered.org/t/dashboard-buttons-easy-colour-state-change/36645/49)

---

<div class="post-metadata">

### Author: ![kpc](https://avatars.discourse-cdn.com/v4/letter/k/ad7895/32.png) [@kpc](https://discourse.nodered.org/u/kpc)
#### Post date: [19 January 2021 19:35 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/3 "2021-01-19T19:35:42Z")

</div>

> There is couple of examples discussed on topic "how to play audio files"

Thanks, wound up using this:

```auto
[{"id":"b3117b76.158a68","type":"file in","z":"f8dfb8e7.8d05c8","name":"sound","filename":"/home/dashboard/.node-red/public/sounds/KeypressStandard.wav","format":"","chunk":false,"sendError":false,"encoding":"none","x":130,"y":120,"wires":[["abfb6de1.91e25"]]},{"id":"abfb6de1.91e25","type":"ui_audio","z":"f8dfb8e7.8d05c8","name":"button_press_keyclick","group":"f12fc27c.2d391","voice":"fr-FR","always":true,"x":300,"y":120,"wires":[]},{"id":"f12fc27c.2d391","type":"ui_group","name":"Clock","tab":"82d87e5e.12e2e","order":2,"disp":false,"width":"10","collapse":false},{"id":"82d87e5e.12e2e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

This worked on Chrome (Linux) and Kiosker (iPad). It did not work on Safari or Kiosk+ (iPad). Go figure!

> But also may be the vibrate can do the trick for you

Sadly, the iPad I'm using for this application doesn't have a vibrator.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [19 January 2021 20:11 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/4 "2021-01-19T20:11:53Z")

</div>

At least something. The I devices are much more conservative than others. But also out of my knowledge area so can't advise anything surely useful.

---

<div class="post-metadata">

### Author: ![kpc](https://avatars.discourse-cdn.com/v4/letter/k/ad7895/32.png) [@kpc](https://discourse.nodered.org/u/kpc)
#### Post date: [19 January 2021 20:14 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/5 "2021-01-19T20:14:16Z")

</div>

I'm on the Kiosker trial period, will probably shell out the $30 even though that's a total ripoff for what I need it for. It has some nice features to make the UI more polished and professional, like disabling "scroll bouncing".

---

<div class="post-metadata">

### Author: ![kpc](https://avatars.discourse-cdn.com/v4/letter/k/ad7895/32.png) [@kpc](https://discourse.nodered.org/u/kpc)
#### Post date: [20 January 2021 20:05 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/6 "2021-01-20T20:05:48Z")

</div>

> [@kpc](#):
>
> This worked on Chrome (Linux) and Kiosker (iPad). It did not work on Safari or Kiosk+ (iPad). Go figure!

Hmm, guess I can't edit my post to correct something inaccurate?

It turns out that the audio out node doesn't actually work on iOS. What I think I was seeing is that Node-RED wasn't fully disabling existing template nodes when I deleted them and hit Deploy. So for iOS I'm now using this:

```auto
[{"id":"57564095.43c3e","type":"ui_template","z":"f8dfb8e7.8d05c8","group":"70fb931.dfc146c","name":"clicking_sound_on_button_press","order":7,"width":0,"height":0,"format":"<script>\n$('button').click(function() {\n new Audio(\"/sounds/KeypressStandard.wav\").play();\n})\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":160,"y":120,"wires":[[]]},{"id":"70fb931.dfc146c","type":"ui_group","name":"Weather forecast","tab":"82d87e5e.12e2e","order":1,"disp":true,"width":"10","collapse":false},{"id":"82d87e5e.12e2e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [20 January 2021 20:14 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/7 "2021-01-20T20:14:56Z")

</div>

Works for windows as well.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [3 February 2021 20:15 UTC](https://discourse.nodered.org/t/how-to-have-the-browser-play-a-clicking-noise-when-a-button-is-pressed/39362/8 "2021-02-03T20:15:04Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
