按下按鍵時播放聲音

Question

有人知道是否有任何預定義的方式可以爲從鍵盤輸入到HTML表單的每個字母播放聲音？

例如：在文本字段中，如果我鍵入Y，網站會顯示Y等等。

或者，最好的辦法是做什麼？

Answer 1

您必須擁有所有字母的聲音文件，並將它們稱爲帶有JavaScript的按鈕事件播放。

Answer 2

它很容易播放聲音，並且很容易爲按鍵添加處理程序，但沒有預定義的方式來鏈接這兩個操作，因此您必須輸入自己的代碼。

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

而且隨着

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

執行：

1）按鍵

document.onkeydown = function() { 
    ... 

2）播放聲音

添加音頻元素行爲

例如，您可以建立一個地圖鏈接鍵碼的聲音元素ID：

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

同比可能會發現鍵碼here

Answer 3

我只是寫了一個快速的腳本，簡化了工作下來，只爲你的HTML。

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

文檔

上面的腳本給特殊意義的keysound元素，讓你玩的時候用戶按下一個鍵的聲音。這些是特殊的屬性。

• anycase
  • 使得按鍵的情況下insenstive
• keys=...
  • 會玩這個聲音的按鍵
• regexp
  • 使得它使得每個鍵的URL可以是一個正則表達式狀的方式，像這樣的不同：
  • 在URL ${key}將選擇的鍵的每個的純文本表示被替換
  • ${code}在該URL將每個選擇的鍵基體10 ASCII鍵碼錶示被替換
• src=...
  • 確定音頻文件的URL。是受正則表達式屬性

見有關的這些例子演示。