コードはこちら
<div style="text-align:center;">
<div class="container mt-5">
<div id="PassageArea">0</div>
</div>
<div class="container mt-5">
<input type="number" id="number" min=1 value=5 style="width:80px;">
</div>
<div class="container mt-5">
<button class="btn btn-primary" id="startcount" onclick="startShowing();">カウント開始</button>
<button class="btn btn-primary" id="endcount" onclick="stopShowing();">カウント停止</button>
</div>
</div>
</div>
<script>
var msg;
var number;
var count = 0;
var timer_id;
function startShowing() {
count = 0;
number = document.getElementById("number").value;
document.getElementById("startcount").disabled = true;
countup();
}
function stopShowing() {
count = 0;
clearTimeout(timer_id);
document.getElementById("startcount").disabled = false;
}
function countup() {
count ++;
document.getElementById("PassageArea").innerHTML = count;
console.log(count % number);
if(count % number == 0){
sound1();
}else{
sound2();
}
timer_id = setTimeout(countup,1000);
}
function sound1(){
var id = 'sound-file1';
if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ){
document.getElementById( id ).currentTime = 0;
}
document.getElementById( id ).play() ;
}
function sound2(){
var id = 'sound-file2';
if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ){
document.getElementById( id ).currentTime = 0;
}
document.getElementById( id ).play() ;
}
</script>
<audio id="sound-file1" preload="auto">
<source src="beep1.mp3" type="audio/mp3">
</audio>
<audio id="sound-file2" preload="auto">
<source src="beep2.mp3" type="audio/mp3">
</audio>
<style>
#PassageArea{
font-size:42px;
border:1px solid #666;
padding:20px;
width:100px;
margin:0px auto;
}
</style>
javascriptで音を鳴らす関数
<audio id="sound-file1" preload="auto">
<source src="beep1.mp3" type="audio/mp3">
</audio>
htmlのaudioタグでidを指定してセット
function sound1(){
var id = 'sound-file1';
if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ){
document.getElementById( id ).currentTime = 0;
}
document.getElementById( id ).play();
}
play()メソッドで音を鳴らす。
HTMLMediaElement.currentTimeプロパティ
現在の再生時間を秒単位で示す。
この値を設定するとメディアは新しい時間にシークされる。
コメント