网页H5制作节拍器

news/2024/10/31 5:28:38/

简介

节拍器像敲木鱼一样，有规律和节奏哒哒哒响，这个程序可以完美做到。

所有软件都能实现节拍器，网页无疑是跨平台的最佳方案。

前端代码

绘制节拍器界面，为了代码的简洁，只绘制了一个图，播放速度固定。

<!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);" >&nbsp;&nbsp;&nbsp;&nbsp;点击开始</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);elseaudio_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>