网页H5制作节拍器

obanaganastar

已于 2022-04-26 12:48:28 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： javascript html5

于 2022-04-26 12:42:33 首次发布

本文链接：https://blog.csdn.net/obanaganastar/article/details/124424324

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了一个使用前端代码实现的简单节拍器程序。通过HTML和JavaScript，该程序能够模拟节拍器的功能，固定60拍，点击按钮即可开始播放，并伴有图形和声音的变化。代码简洁且跨平台，适合音乐爱好者作为练习节拍的小工具。

摘要由CSDN通过智能技术生成

简介

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

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

前端代码

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

<!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);
			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>