タイトル通りの記事です。
今回の例では、Enterキーを押している間、指定したサウンドファイルを再生します。
Enterキーを離すと、演奏を停止します。「押している間」というのがミソです。
ソースコードと解説
以下サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <script type="text/javascript"> <!-- var audio_key; var n=0; document.onkeydown = function keydown(e) { if(n==0 && e.keyCode == '13') { audio_key = new Audio(); audio_key.src = "enda.wav"; audio_key.play(); n=n+1; } } document.onkeyup = function () { audio_key.pause(); n=0; } --> </script> </head> <body> </body> </html> |
サンプルはこちら (別ページ表示)
onkeydownを検知し、かつkeyCodeが13のキー（Enterキー）が押下されている間イベントを起こすのですが、
そのまま音声再生を命令すると、押下中延々と再生しだそうとするので音が何重にもなります。
そこは、単純にif文とかで回避しましょう。
ちなみに、キーコードはこちらを参照されると、一目瞭然と思います。
もちろんキーの押下でイベント内容を変更できるので、
簡単に文字などを加え、再生中と停止中を区別するなども、良いと思います。
以下サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<html> <head> <script type="text/javascript"> <!-- var audio_key; var n=0; document.onkeydown = function keydown(e) { if(n==0 && e.keyCode == '13') { audio_key = new Audio(); audio_key.src = "enda.wav"; audio_key.play(); n=n+1; } document.getElementById("audio_text").innerText = "再生中"; } document.onkeyup = function () { audio_key.pause(); n=0; document.getElementById("audio_text").innerText = "停止中"; } --> </script> <style type="text/css"> <!-- body { background-color:#8899cc; font-size: 5em; font-weight:bold; color:#fff; } div.text { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto; width: 100%; height: 250px; text-align:center; } div.radius { width:300px; height:300px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; flex-flow: column wrap; vertical-align: top; border: 4px solid #fff; background-color:#334455; } --> </style> </head> <body> <div class="text"> <div id="audio_text" class="radius">停止中 </div> </div> </body> </html> |
サンプルはこちら (別ページ表示)
なんか好きなBGMや楽曲を、
好きなキーを押すことで反応させるお遊びなどに使われると、
良いと思います。
おわり。
以下駄文
制作経緯
エンダーキー#クソ動画 pic.twitter.com/fnpkQATWN1
— ネオングロウ (@dj_neongrow) 2018年11月21日
このクソ動画がつくりたかったから。
おわり。
いや聞いてくださいよ、ないんですよ。
キーを押したら音楽を再生するフリーソフトってのは、いっぱいあるんです。が、
押下中だけ再生して、離したら停止するっていうソフトが、ないんですよ。
だからもうどれだけ探してもなかったのでJavaScriptでえんやこらー！したんです。
おかげで昨日仕事から帰ってきてからの１日つぶれました。
そういう日があっても、いいじゃない。
気づいたけど音声後から合成すりゃよかったわ
