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

Dashboard
1

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

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 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?

2

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

But also may be the vibrate can do the trick for you
Dashboard buttons easy colour state change? - #49 by hotNipi

3

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

Thanks, wound up using this:

[{"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.

4

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.

5

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".

6

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:

[{"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}]
2 Likes
7

Works for windows as well.

8

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