b.b.m.2 is a metronome web application designed to help musicians keep a steady tempo while practicing or performing. It produces an audible sound at regular intervals.
The tool uses HTML, CSS, and JavaScript to render a user interface that includes a large display of the current tempo, buttons to adjust the tempo, and buttons to start/stop/tap the metronome. The user can also use the "Tap Tempo" button to manually set the desired beat when tapping the button 4 or more consecutive times.
The CSS code provides a responsive design that adapts to various screen sizes and sets the style for all of the user interface elements. The JavaScript code defines variables and functions to manage the behavior of the metronome tool. The metronome sound is generated using the Web Audio API, which creates an oscillator object that generates a tone at a specific frequency for a specified duration.
- Set BPM directly or increment/decrement it using buttons: Users can enter a BPM value directly into an input field or use "+" and "-" buttons to increment/decrement the BPM value.
- Calculate BPM based on user taps: Users can tap a "Tap Tempo" button in time with their desired tempo and the metronome will calculate and set the corresponding BPM value.
- Audible sound for each beat: The metronome uses an oscillator from the Web Audio API to produce an audible sound for each beat.
- Visual aids to represent the BPM: A circle visual indicator changes opacity in time with the metronome beats to provide a visual representation of the tempo.
The metronome is implemented using HTML, CSS, and JavaScript. JavaScript is used in several ways, such as:
- Adding event listeners to buttons and other elements to respond to user interactions
- Using functions to create timers for clearing old tap times and playing beats at regular intervals
- Using the Web Audio API to create an oscillator and control its frequency and volume
- Creating and syncing visual elements to the tempo beep
The code is designed to be simple yet fine-tuned to deliver crucial functionality, ergonomy, and visual accessibility. It's a useful tool for musicians as well as a valuable resource for developers looking to study how such an application can be implemented.
This is a personal project and exercise. While the primary aim is to serve personal purposes, the process, code, and deployment are welcomed to be used as a tool in deployed form and as study material in code form. I hope you find it useful!
b.b.m.2 can be accessed here
the javascript is extensively commented here
you can also find the commented style.css and index.html here
additionally, if you haven't had enough of your fill of metronome code, you can find the project table of contents here
メトロノームは、演奏や練習中に音楽家が一定のテンポを保つのに役立つ道具です。 定期的な間隔で聴覚的な音を出し、ビート/分（BPM）の数はユーザーによって調整可能です。
- BPMを直接設定するか、ボタンを使用して増減する機能
- ユーザーのタップに基づいてBPMを計算する機能
- 各ビートごとに聴覚的な音を生成するためのオシレーターの使用
JavaScriptは、次の形式で複数使用されます。
- ボタンやその他の要素にイベントリスナーを追加して、ユーザー操作に応答します。
- setTimeoutおよびsetIntervalを使用して、古いタップ時間をクリアし、定期的な間隔でビートを再生するためのタイマーを作成します。
- Web Audio API を使用してオシレーターを作成し、その周波数と音量を制御します。
これは個人的なプロジェクトとエクササイズです。 主な目的は個人的な目的に役立つことですが、プロセス、コード、およびデプロイメントはデプロイされた形式でツールとして使用されることも歓迎されます。
O metrônomo é uma ferramenta que ajuda os músicos a manter um ritmo constante enquanto praticam ou se apresentam. Ele produz um som audível em intervalos regulares, com o número de batidas por minuto (BPM) sendo ajustável pelo usuário.
- A capacidade de definir o BPM diretamente ou incrementar/decrementar usando botões
- A capacidade de calcular o BPM com base nas batidas do usuário
- O uso de um oscilador para produzir um som audível para cada batida
O JavaScript é usado em várias formas como:
- Adicionar ouvintes de eventos a botões e outros elementos para responder às interações do usuário
- Usando setTimeout e setInterval para criar temporizadores para limpar tempos antigos de toque e tocar batidas em intervalos regulares
- Usando a API Web Audio para criar um oscilador e controlar sua frequência e volume
Este é um projeto pessoal e exercício. Embora o objetivo principal seja atender a fins pessoais, o processo, código e implantação são bem-vindos para serem usados como uma ferramenta na forma implantada e como material de estudo na forma de código.
El metrónomo es una herramienta que ayuda a los músicos a mantener un tempo constante mientras practican o actúan. Produce un sonido audible en intervalos regulares, con el número de beats por minuto (BPM) ajustable por el usuario.
- La capacidad de establecer el BPM directamente o incrementarlo/decrementarlo usando botones.
- La capacidad de calcular el BPM en función del toque del usuario.
- El uso de un oscilador para producir un sonido audible en cada beat.
JavaScript se usa en varias formas como:
- Agregar escuchas de eventos a botones y otros elementos para responder a las interacciones del usuario.
- Usando setTimeout y setInterval para crear temporizadores para borrar tiempos antiguos y reproducir beats en intervalos regulares.
- Usando la API Web Audio para crear un oscilador y controlar su frecuencia y volumen.
Este es un proyecto personal y ejercicio. Si bien el objetivo principal es servir a propósitos personales, se da la bienvenida al proceso, código y despliegue como herramienta en forma desplegada y como material de estudio en forma de código.
메트로놈은 연주나 연습 중 음악가들이 일정한 템포를 유지하는 데 도움이 되는 도구입니다. 정기적인 간격으로 청각적인 소리를 내며 사용자가 조절할 수 있는 분당 비트 수 (BPM) 입니다.
- BPM을 직접 설정하거나 버튼을 사용하여 증가/감소시키는 기능
- 사용자 탭에 따라 BPM을 계산하는 기능
- 각 비트마다 청각적인 소리를 생성하기 위해 오실레이터 사용
JavaScript는 다음과 같은 여러 형태로 사용됩니다.
- 버튼 및 기타 요소에 이벤트 리스너 추가하여 사용자 상호 작용에 응답
- setTimeout 및 setInterval을 사용하여 이전 탭 시간을 지우고 정기적인 간격으로 비트 재생을위한 타이머 생성
- Web Audio API를 사용하여 오실레이터 생성 및 주파수 및 볼륨 제어
개인 프로젝트와 운동입니다. 주요 목표는 개인적인 목적에 부합하는 것이지만 프로세스, 코드 및 배포는 배포된 형태의 도구로서와 코드 형태의 학습 자료로서의 사용도 환영합니다.