Play a sound when a key is pressed

Question

Does anybody know if there is any predefined way to play a sound for every letter typed from keyboard into the HTML form?

For example: In a text field if I type Y, website says Y and so on.

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

Answer 1

It's easy to play sound, and it's easy to add handlers to key press, but there is no predefined way to link the two operations so you'll have to type your own code.

1) act on key press

document.onkeydown = function() {
    ...

2 ) play sound

Add an audio element :

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

And execute it with

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

You could for example build a map linking keycodes to sound element ids :

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 may find keycodes here

Answer 2

您必须拥有所有字母的声音文件，并使用JavaScript在按钮按下事件上调用它们。

Answer 3

I just wrote a quick script that simplifies the job down to only 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.github.io/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 meanings to the keysound element to allow you to play sounds when a user pushes down on a key. Theese are the special attributes.

• anycase
  • makes the keys case insenstive
• keys=...
  • the keys that will play this sound
• regexp
  • makes it so that the URL of each key can be different in a regexp-like manner like so:
  • ${key} in the URL will get replaced by the plain text representation of each selected key
  • ${code} in the URL will get replaced by the base 10 ASCII key code representation of each selected key
• src=...
  • determines the URL of the audio file. Is affected by the regexp attribute

See the demo about for examples of these.