Cree sus propios widgets fácilmente - Contador rápido de BPM: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:40

Las aplicaciones web son un lugar común, pero las aplicaciones web que no requieren acceso a Internet no lo son.

En este artículo les muestro cómo hice un contador de BPM en una página HTML simple junto con javascript vanilla (ver aquí). Si se descarga, este widget se puede usar sin conexión, ideal para músicos que desean crear pero no siempre tienen acceso a Internet. Aún mejor, al usar la aplicación de panel OSX (que nunca pareció tan útil antes), podemos hacer que este contador de BPM sea más rápido de usar.

Paso 1: ¿Cómo debería verse?

Evidentemente, la respuesta a la pregunta es cuestión de opinión. Mi postura es que debería ser súper simple y solo hacer lo que un contador de BPM necesita para: contar latidos por minuto. Por lo tanto, todo lo que necesita es un botón y un valor de recuento.

Paso 2: la lógica

Calcular BPM es tan fácil como medir el tiempo entre dos latidos secuenciales y calcular cuántos de estos podría caber en un minuto.

let prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); intervalo constante = (currentTime - prev_click) / 1000; const bpm = 60 / intervalo; prev_click = currentTime; return bpm; } get_bpm (); // p.ej. 120

Llevé esto más lejos promediando los 3 latidos anteriores como este:

promedio constante = 3;

const prev_bpms = [60]; let prev_click = new Date () const getBPM = function () {const currentTime = new Date (); intervalo constante = (currentTime - prev_click) / 1000; const bpm = 60 / intervalo; prev_click = currentTime; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; return bpm; } get_bpm (); // p.ej. 120

Además, no todos quieren presionar el botón, sino quizás una tecla:

// disparador de la barra espaciadora

window.addEventListener ('pulsación de tecla', (e) => {if (e.code === 32) getBPM ();}); // capacidad instantánea document.querySelector ('. botón clicker'). focus ();

Ahora, los usuarios también pueden tocar con la barra espaciadora tan pronto como se cargue la página.

Paso 3: Escuche su BPM

Ha marcado su BPM, pero ahora quiere reproducirlo para poder tocar con su tempo favorito.

Para hacer esto, debemos hacer sonido. ¿Pero cómo? Tenemos dos opciones integradas en el navegador AudioAPI, usar un archivo de sonido o crear un sintetizador. Primero usaremos el sintetizador para crear un pitido:

const AudioContext = window. AudioContext || window.webkitAudioContext;

dejar contexto, oscilador; const bpm = 60; const bpmInterval = 60 / bpm * 1000; // mssetInterval (pitido, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); oscilador = context.createOscillator (); oscillator.type = "seno"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Ahora hagamos algo similar usando un archivo de audio en su lugar:

clic constante = nuevo audio (‘./ cowbell.mp3’);

const bpm = 60; const bpmInterval = 60 / bpm * 1000; // ms setInterval (beep, bpmInterval); const beep = function () {click.play (); setTimeout (() => {click.pause (); click.currentTime = 0.0;}, 150); };

Finalmente agregando la lógica que los controla:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. botón de jugador'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (pitido, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Paso 4: Poniéndolo todo junto

Ahora juntando todas las características y agregando un poco de estilo (que no voy a explicar), tenemos este producto final:

No sé cuánto código la gente realmente quiere ver directamente en el artículo, así que busque el código completo en

Paso 5: uso efectivo (solo usuarios de OSX)

Si ha usado una Mac antes, es posible que se haya topado con la aplicación nativa del panel de control, pero probablemente no se haya quedado mucho tiempo.

Realmente nunca lo he usado … hasta ahora. En Safari, puede hacer clic con el botón derecho en la página, lo que a veces hace que aparezca una selección de acción, incluida la apertura en el panel …

Al hacer clic en esto, se le revelará un creador de widgets de página web. Puede seleccionar parte de la página que le gustaría agregar a su panel de control. Esta es una característica muy buena, pero para nuestro caso, es una característica muy buena. Al abrir el contador de BPM que acabamos de hacer, puede seleccionar la casilla de esta manera:

Ahora use el atajo de la tecla F12. AUGE. Nunca ha sido tan fácil crear widgets usted mismo, de forma rápida y sencilla.

Paso 6: notas

Quizás se pregunte por qué este no incluye la función de reproducción de metrónomo. Cuando intenté usarlo en el tablero, el programa no reproducía el audio de manera confiable: (Pero al menos Logic puede hacer esa parte fácilmente.

Y la razón por la que le mostré cómo crear sonidos de dos maneras diferentes es porque la versión de contexto de audio que usa un sintetizador no funcionaría dentro del tablero.

Finalmente, no puede simplemente hacer clic en F12 y proceder a usar la barra espaciadora para obtener el tempo, debe hacer clic directamente en el botón, que es una degradación. Pero creo que esta puede ser la forma en que hago pequeños widgets a partir de ahora. Si tiene alguna idea interesante para esto, muéstreme cuándo las ha implementado:)

¡Suscríbase a nuestra lista de correo!

Y sí, echa un vistazo a T3chFlicks: ¡hacemos cosas!