【理系大学生】yomiakiのラクガキ

徒然なるままによみあき

【プログラミング】JavaScript勉強記 ep4　～シン・バスドラムメトロノーム～

JavaScript プログラミング

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="ＯＫ" 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か数字でないものが入力されたとき、「０以外の数字を入力してください」と注意が表示されるようになっています。

else{
document.getElementById( "caution" ).innerHTML=""
id=setInterval("myChange()",myInterval);
}

これで0以外の数字が入力されたときに、前に注意が表示されている場合はそれを消して、入力したテンポに基づいてsetIntervalでmyChangeが実行されます。

やってみて

  • ローカル変数、グローバル変数が原因での不具合結構ありそうだなと思った。
  • タイマーは動かしたら、次動かすときにしっかり前のタイマーを止めなければめちゃくちゃになることが分かった。
  • 音が出せたとき素直にうれしかった。注意の文表示できたのもよかった。

 

まだまだ勉強は続きます…。

 

よみあきでした。