◀︎ i ▶︎

<html lang="ja">
<meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<style>
*:focus{outline:none;}
body{font-size:1em;
text-align:center;}
input{font-size:1em;
width:60px;
text-align:center;}
form{display:inline;}
span{color:#000000;
margin-left:4px;
font-size:12px;}
.音源_選択{margin:00px;
width:100px;}
.せっと_分{margin:0;
height:20px;
width:30px;
text-align:center;}
.せっと_秒{margin:0;
height:20px;
width:40px;
text-align:center;}
#手動_演奏停止{margin-top:15px;
margin-left:120px;
height:50px;
width:150px;}
</style>

<form name="たいまー">
<input type="text"value=""class="せっと_分"><span>分</span>
<input type="text"value=""class="せっと_秒"><span>秒</span>
<input type="button"value="スタート"onclick="始まり()">
<input type="button"value="ストップ"onclick="location.reload()">
</form>
<form name="曲_りすと">
<select name="素材_曲"class="音源_選択">
<option>Bach_Invention</option>
<option>Beethoven_Sonata_No.8_2</option>
<option>Chopin_Nocturne</option>
<option>Debussy_Arabesque</option>
<option>Mozart_Sonata</option>
</select>
</form>

<script>
let 設定時間;
let 音源=new Audio();
function 始まり()
{切替(true);
設定時間=setInterval("待つ()",1000);}
function 停止()
{切替(false);
clearInterval(設定時間);}
function 切替(buttonSwitch)
{let 手動_開始=document.たいまー.elements[2]
let 手動_停止=document.たいまー.elements[3]
let 時間差=buttonSwitch
手動_開始.disabled=時間差
手動_停止.disabled=!時間差}
function 待つ()
{let せっと_分=document.たいまー.elements[0].value;
let せっと_秒=document.たいまー.elements[1].value;
if((せっと_分=="")&&(せっと_秒=="0"))
{alert("0 以外の数字");
初期化();}
else
{if(せっと_分=="")せっと_分=0;
せっと_分=parseInt(せっと_分);
if(せっと_秒=="")せっと_秒=0;
せっと_秒=parseInt(せっと_秒);
かうんと(せっと_分*60+せっと_秒-1);}}
function 素材_順番()
{let 素材_選択=document.曲_りすと.素材_曲;
let 素材_番号=素材_選択.selectedIndex;
let 素材_0="piano_mp3/Bach_Invention.mp3";
let 素材_1="piano_mp3/Beethoven_Sonata_No.8_2.mp3";
let 素材_2="piano_mp3/Chopin_Nocturne.mp3";
let 素材_3="piano_mp3/Debussy_Arabesque.mp3";
let 素材_4="piano_mp3/Mozart_Sonata.mp3";
let 素材_列=[素材_0,素材_1,素材_2,素材_3,素材_4]
return 素材_列[素材_番号]}
function かうんと(飛){飛=parseInt(飛);
if(飛<=0){初期化();
音(true)
入力項目()}
else
{document.たいまー.elements[0].value=Math.floor(飛/60);
document.たいまー.elements[1].value=飛 % 60;}}
function 音(時間差)
{let 音源_発音=素材_順番()
音源.src=音源_発音;
if(時間差){音源.play()}
else
{音源.pause()
音源.currentTime=0;
document.getElementById("手動_演奏停止").remove();}}
function 初期化()
{document.たいまー.elements[0].value="0";
document.たいまー.elements[1].value="0";
document.たいまー.elements[2].disabled=false;
clearInterval(設定時間);}
</script>

</html>