Riprodurre un suono quando viene premuto un tasto

Question

Qualcuno sa se esiste un modo predefinito per riprodurre un suono per ogni lettera digitata dalla tastiera nel modulo HTML?

Ad esempio: in un campo di testo se si digita Y, il sito Web dice Y e così via.

Oppure, quale sarebbe il modo migliore per farlo?

Answer 1

È necessario disporre di file audio per tutte le lettere e chiamarli a suonare sul pulsante premere evento con JavaScript.

Answer 2

È facile riprodurre suoni ed è facile aggiungere gestori alla pressione di un tasto, ma non esiste un modo predefinito per collegare le due operazioni, quindi è necessario digitare il proprio codice.

1) agiscono sulla pressione di un tasto

document.onkeydown = function() { 
    ... 

2) riprodurre l'audio

aggiungere un elemento audio:

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

ed eseguirlo con

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

Si potrebbe ad esempio costruire una mappa che collega keycodes al suono id elemento:

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 può trovare keycodes here

Answer 3

ho appena scritto uno script rapida che semplifica il lavoro fino a solo HTML per voi.

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

<!-- Demo code example --> 
 
<keysound keys="abcdefghijklmnopqrstuvwxyz" 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" />

Documentazione

Lo script precedente dà un significato speciale per l'elemento TonoTast per consentire di riprodurre i suoni quando un utente spinge verso il basso su un tasto. Questi sono gli attributi speciali.

• anycase
  • rende il caso chiavi insenstive
• keys=...
  • le chiavi che giocheranno questo suono
• regexp
  • fa in modo che l'URL di ogni tasto può essere diverso in modo regexp-come in questo modo:
  • ${key} nell'URL andranno sostituiti dalla rappresentazione di testo di ogni tasto selezionato
  • ${code} in l'URL otterrà sostituita dalla rappresentazione codice chiave ASCII base 10 di ciascun tasto selezionato
• src=...
  • determina la URL del file audio. È influenzato dal regexp attributo

vedere la demo su per gli esempi di questi.