网页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>

演示程序

我平时练习节拍的一个小道具。

安纶吉他:http://www.aljita.cn/tool


http://www.ppmy.cn/news/520297.html

相关文章

如何听节拍器_钢琴练习中节拍器的使用

钢琴练习中节拍器的使用 刘晶姝 【摘 要】 节拍器是一种可以设定每分钟发出有规律的特定节拍的机械&#xff0c;一般节拍 器可以分为机械式和电子式两种。机械节拍器有个带有刻度的钟摆&#xff0c;刻度一般从每 分钟 40 拍到 208 拍。电子节拍器是通过液晶显示器显示节拍并以微…

节拍脉冲发生器的设计

在Logisim中&#xff0c;构建由4个D触发器构成的4位节拍脉冲发生器。 相关知识 在数控装置和CPU中&#xff0c;设备/部件往往需要按照人们事先规定的顺序进行运算或操作&#xff0c;这就要求设备的控制部分不仅能正确地发出各种控制信号&#xff0c;而且要求这些控制信号在时间…

如何听节拍器_二胡初学者如何使用节拍器? | 乐器教程网

节拍器是针对初次学习乐器的人&#xff0c;尤其是音乐节奏概念还不成熟、不稳定的人&#xff0c;使用的一种工具。作为一种辅助手段&#xff0c;让学乐器的人建立稳定的节奏感&#xff0c;是有一定作用的&#xff0c;对于音乐节奏感强的人&#xff0c;就用不着节拍器了。 节拍器…

ucosIII之时钟节拍的理解

时钟节拍 介绍时钟节拍作用,时钟节拍引起的一系列的工作,OSTime_tick和OStick_Tast,时钟列表更新函数,时钟列表插入函数1、ucosIII的时钟节拍,就是系统反应的最小时间,是系统灵活度的指标. 2、由硬件定时器引发的定时器中断会调用一个时钟节拍ISR(中断服务程序),然后ISR程序会调…

如何听节拍器_教你如何使用节拍器

一、节拍器进入钢琴学习的时机 对于节拍器什么时候开始用、在学琴的哪个阶段开始用是很多人关心的问题&#xff0c;其实这并不用刻意、精确地来划定&#xff0c;一般来说考虑2个因素就可以了&#xff1a;年龄、水平。 年龄限制是针对小孩子来说的。孩子年龄太小的话&#xff0…

精益生产的生产节拍

精益生产 精益生产&#xff08;Lean Production&#xff09;&#xff0c;简称“精益”&#xff0c;是衍生自丰田生产方式的一种管理哲学。 包括众多知名的制造企业以及麻省理工大学教授在全球范围内对丰田生产方式的研究、应用并发展&#xff0c;促使了精益生产理论和生产管理…

Au:节拍器

节拍器 Metronome可以在录音过程中提供有节奏的参考来辅助录制。节拍器信号不会被录制到任何音轨中&#xff0c;而只是直接发送到主音轨输出总线。 在开启节拍器进行录制时&#xff0c;建议使用监听耳机&#xff0c;以免录到外放的节拍器的声音。 提示&#xff1a;如果不懂乐理…

嵌入式实时操作系统10——系统时钟节拍

1.系统节拍是什么 时间管理在操作系统内核中占有非常重要的地位&#xff0c;操作系统内核中有大量基于时间驱动的功能。有些任务是需要周期执行&#xff0c;比如一个软件定时器需要一秒钟周期性运行100次&#xff1b;有些功能任务需要延时一段时间后再运行&#xff0c;比如一个…