【プログラミング】JavaScript勉強記 ep4 ~シン・バスドラムメトロノーム~
JavaScript勉強記 ep4 ~シン・バスドラムメトロノーム~
youtu.beこの前「バスドラムメトロノーム(仮)」を作ってみて、挙動がかなり怪しかったので、いろいろと改良を加え、この度「シン・バスドラムメトローム」(庵野秀明監督風)が完成しました!
しっかり動作します!なんと音も出ます!
コード
コードは次のようになっています。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>バスドラム</title> </head> <body> <script type="text/javascript"> myImage=new Array( "pedal0.png", "pedal1.png", "pedal1.png", "pedal1.png" ); var id=0; var myTemp=0 var myInterval=0; function mySet(){ myNowCnt=0; myInterval=0; myTemp=document.getElementById("myFormTemp").value; myInterval=eval(250*(60/Number(myTemp))); } function mySound(){ document.getElementById("sound-file").currentTime=0; document.getElementById("sound-file").play() } function myChange(){ if(myNowCnt==myImage.length-1){ myNowCnt=0; mySound(); }else{ myNowCnt++; } document.sshow.src=myImage[myNowCnt]; } function myStart(){ clearInterval(id); mySet(); if(myTemp==0 || isNaN(myTemp)){ document.getElementById( "caution" ).innerHTML="0以外の数字を入力してください"; } else{ document.getElementById( "caution" ).innerHTML="" id=setInterval("myChange()",myInterval); } } </script> <form name="myForm"> テンポを入力してください BPM= <input type="text" size="2" id="myFormTemp"> <input type="button" value="OK" onclick="myStart()"> </form> <div id="caution"></div> <img src="pedal0.png", width="500", height="500", name="sshow"> <audio id="sound-file" preload="auto"> <source src="和太鼓でドン.mp3" type="audio/mp3"> </audio> </body> </html>
関数mySetについて
(仮)ではmyTempの変数が定義されていなかったので、関数の外でグローバル変数として定義しました。
あと最後のreturn冗長だったので消しました。
myTemp=document.getElementById("myFormTemp").value;
(仮)の感じではうまいことフォームに入力した値を変数に入れることができていなかったため、上のようにgetElementByIdを使った書き方にしました。
関数mySoundについて
この関数はHTMLで読み込んだ音声ファイルを再生するものとなっています。
document.getElementById("sound-file").currentTime=0;
これで音声ファイルの再生位置をmySoundが実行されるたびに、最初の位置に巻き戻せるようになっています。
document.getElementById("sound-file").play();
これで音声ファイルを再生します。
関数myChangeについて
if文でpedal0の画像(ハンマーがドラムにあたる画像)が表示されるタイミングで、上で定義したmySoundが実行されるようになっています。
関数myStartについて
フォームのOKボタンを押したらいろいろと実行されます。
clearInterval(id);
これでOKボタンを押す前に動いていた場合、タイマーを止めます。
if(myTemp==0 || isNaN(myTemp)){
document.getElementById( "caution" ).innerHTML="0以外の数字を入力してください";
}
これでテンポ入力フォームで0か数字でないものが入力されたとき、「0以外の数字を入力してください」と注意が表示されるようになっています。
else{
document.getElementById( "caution" ).innerHTML=""
id=setInterval("myChange()",myInterval);
}
これで0以外の数字が入力されたときに、前に注意が表示されている場合はそれを消して、入力したテンポに基づいてsetIntervalでmyChangeが実行されます。
やってみて
- ローカル変数、グローバル変数が原因での不具合結構ありそうだなと思った。
- タイマーは動かしたら、次動かすときにしっかり前のタイマーを止めなければめちゃくちゃになることが分かった。
- 音が出せたとき素直にうれしかった。注意の文表示できたのもよかった。
まだまだ勉強は続きます…。
よみあきでした。