キーが押されたときに音を鳴らす

Question

キーボードから入力されたすべての文字に対して、HTMLフォームにサウンドを再生するための事前定義された方法があるかどうか知りませんか？

例：テキストフィールドにYと入力すると、WebサイトにYと表示されます。

または、これを行うにはどうすればよいでしょうか？

Answer 1

すべての文字のサウンドファイルを用意し、JavaScriptを使用したボタンプレスイベントで再生する必要があります。

Answer 2

音を鳴らすのは簡単ですし、キープレスにハンドラーを追加するのは簡単ですが、2つの操作をリンクするための事前定義された方法はありませんので、独自のコードを入力する必要があります。

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

そして

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

でそれを実行します。

1）キーを押して上の行為

document.onkeydown = function() { 
    ... 

2）は、audio要素を追加し、音

を再生します

は、次の例のように要素のidを音にキーコードをリンクするマップを構築することができ：前年比は、キーコードhere

Answer 3

を見つけることができ

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

私はちょうどダウンあなたのためだけの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で
• ${key}選択した各キー
• ${code}中のプレーンテキスト表現に置き換えられてしまいます。これは以下のように各キーのURLが正規表現状に異なることができるように
  • はそれを作りますURLは、選択した各キー
• src=...
  • の10 ASCIIキーコード表現が決定ベースに置き換えられてしまいますオーディオファイルのURL。正規表現属性の影響を受けている

は、これらの例では約デモを参照してください。