Sound Abspielen, wenn eine Taste gedrückt wird

Es ist einfach zu spielen Klang, und es ist leicht zu add-Handler-Taste drücken, aber es gibt keinen vordefinierten Weg, um die Verknüpfung der beiden Vorgänge so müssen Sie geben Sie Ihren eigenen code.

1) handeln auf-Taste drücken

document.onkeydown = function() {
    ...

2 ) sound Abspielen

Fügen Sie ein audio-element :

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

Und führen Sie es mit

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

Könntest du zum Beispiel bauen Sie eine Zuordnung auf die Verknüpfung Tasten, um 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 finden können keycodes hier

Schrieb ich eine schnelle Skript, das vereinfacht die Arbeit nieder, um nur HTML für Sie.

JS:

(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) {}
		}
	});
})();

HTML:

<!-- 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" />

Dokumentation

Das obige Skript gibt eine spezielle Bedeutung in der keysound-element zu erlauben, Sie zu spielen klingt, wenn ein Benutzer drückt auf eine Taste. Diese sind die besonderen Attribute.

• anycase
  • macht die Schlüssel Fall insenstive
• keys=...
  • Sie die Tasten, spielen diese sound
• regexp
  • macht es so, dass die URL für jede Taste unterschiedlich sein können in einem regexp-wie Art und Weise wie so:
  • ${key} in der URL wird ersetzt durch die nur-text-Darstellung von jedem ausgewählten Schlüssel
  • ${code} in der URL wird ersetzt durch die Basis 10 ASCII-Schlüssel-code-Darstellung der jeweils ausgewählten Schlüssel
• src=...
  • legt die URL der audio-Datei. Betroffen ist von der regexp Attribut

Finden die demo über die Beispiele für diese.