简介
节拍器像敲木鱼一样，有规律和节奏哒哒哒响，这个程序可以完美做到。
所有软件都能实现节拍器，网页无疑是跨平台的最佳方案。
前端代码
绘制节拍器界面，为了代码的简洁，只绘制了一个图，播放速度固定。
<!DOCTYPE HTML>
<html>
<head>
<style>
section.tool{
background: rgb(213, 253, 213);
margin-top: 1vh;
margin-left: 10%;
width:40%;
height:50%;
}
</style>
</head>
<body>
<section class = "tool">
<div class = 'tool1'>
<div class = 'title'><h1>节拍器</h1></div>
<div class="main">
<div class = 'metronome'>
<img src="http://www.aljita.cn/static/head/head_58.png" id = 'image_me'/>
</div>
<hr>
<div class = 'metronome_play'>
<input type = 'image' src = 'http://www.aljita.cn/static/img/play.png' style="display:inline-block" onclick="play(this);" > 点击开始</input>
</div>
<hr>
</div>
</div>
</body>逻辑代码
播放声音和动画，为了代码简洁，固定60拍。
<script>
let audio_context = null;
audio_context_play = function(frequency, duration)
{
ctx = audio_context;
let osc = ctx.createOscillator();
let g = ctx.createGain();
osc.connect(g);
osc.type = 'sine';
osc.frequency.value =frequency;
g.connect(ctx.destination);
g.gain.value = 0;
g.gain.linearRampToValueAtTime(0.6,ctx.currentTime + 0.05);
g.gain.exponentialRampToValueAtTime(0.01 , ctx.currentTime + duration/2);
osc.start();
osc.stop(ctx.currentTime + duration/2);
}
play_metronome = function(pos)
{
let play_heavy = false;
let id = parseInt(Math.random()*105);
let img_src = 'http://www.aljita.cn/static/head/head_'+ id + '.png';
if (pos % 4 == 1)
play_heavy = true;
if (play_heavy)
audio_context_play(880, 0.28);
else
audio_context_play(440, 0.28);
document.getElementById('image_me').src = img_src;
}
player_forever = function(pos)
{
pos += 1;
play_metronome(pos);
setTimeout(() =>
{
player_forever(pos);
}, 1000);
}
play=function(obj)
{
obj.disabled = true;
audio_context = new AudioContext();
player_forever(0);
};
</script>演示程序
我平时练习节拍的一个小道具。
安纶吉他：http://www.aljita.cn/tool
