Play sound when you press a key

Question

Does anyone know if there is any predefined way to play sound for each letter entered from the keyboard into an HTML form?

For example: in the text box, if I type Y, the website says Y, etc.

Or, what would be the best way to do this?

Answer 1

It is easy to play sound, and it is easy to add handlers to keystrokes, but there is no predefined way to link the two operations, so you will need to enter your own code.

1) act upon pressing a key

document.onkeydown = function() { ... 

2) sound reproduction

Add audio element:

 <audio id=alarm> <source src=sound/zbluejay.wav> </audio> 

And execute it with

 document.getElementById('alarm').play(); 

You can, for example, build a map linking key codes with identifiers of sound elements:

 var sounds = { 88 : 'alarm', // key 'x' ... }; document.onkeydown = function(e) { var soundId = sounds[e.keyCode]; if (soundId) document.getElementById(soundId).play(); else console.log("key not mapped : code is", e.keyCode); } 

Yoy can find the key codes here

Answer 2

You must have sound files for all letters and cause them to play when you click a button using JavaScript.

Answer 3

I just wrote a quick script that simplifies things to just HTML for you.

 (function(){ var keyElements = document.getElementsByTagName('keysound'), i = keyElements.length, keys = {}; while (i--){ var cur = (keyElements[i].getAttribute('keys')||"").toString().split(''), v = cur.length, audio = keyElements[i].getAttribute('src'), caseinsensitive = keyElements[i].getAttribute('anycase')!==null?true:false, regexp = keyElements[i].getAttribute('regexp')!==null?true:false; if (audio){ while (v--){ cur[v] = caseinsensitive ? cur[v] : cur[v].toLowerCase(); var src=!regexp?audio: audio.replace('${key}', cur[v]) .replace('${code}', cur[v].charCodeAt(0)); var ele = document.createElement('audio'); ele.src = src; document.body.appendChild(ele); (keys[cur[v]] = keys[cur[v]] || []).push( ele ); if (caseinsensitive) { (keys[cur[v].toUpperCase()] = keys[cur[v].toUpperCase()] || []).push( ele ); } } } } console.log(keys); window.addEventListener('keydown',function(evt){ var clist = keys[evt.key] || [], clen = clist.length; while (clen--){ try { clist[clen].play() } catch(e) {} } }); })(); 

 <!-- Demo code example --> <keysound keys="0123456789abcdefghijklmnopqrstuvwxyz" regexp anycase src="https://the-peppester.imtqy.com/styff/keys/${key}.mp3" /> <keysound keys="QWERTY" src="http://soundbible.com/mp3/Fart-Common-Everyday-Fart_Mike-Koenig.mp3" /> <keysound anycase keys="bnm,./;'[]-=+_()*&^%$#@!`~" src="http://soundbible.com/mp3/Iguana_Farts_In_A_Bathtub-Iguana_Farts-1423164123.mp3" /> <keysound anycase keys="asdfgh" src="http://soundbible.com/mp3/Uuuuuu-Paula-1357936016.mp3" /> 

Documentation

The script above gives special values ​​for the keysound element, which allows you to play sounds when the user presses a key. These are special attributes.

• anycase
  • makes the key case insenstive
• keys=...
  • keys that will play this sound
• regexp
  • makes sure that the URL of each key can be in a different way, similar to regexp:
  • ${key} in the URL will be replaced with a plain text representation of each key selected
  • ${code} in the URL will be replaced by a base 10 ASCII key code representation of each selected key
• src=...
  • determines the URL of the audio file. Regexp attribute changed

See a demo for examples of these.