Faça seus próprios widgets facilmente - Contador de BPM rápido: 6 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:35

Os aplicativos da web são comuns, mas os aplicativos da web que não requerem acesso à Internet não são.

Neste artigo mostro como fiz um Contador de BPM em uma página HTML simples acoplada a javascript vanilla (veja aqui). Se baixado, este widget pode ser usado offline - ideal para músicos que desejam criar, mas nem sempre têm acesso à Internet. Melhor ainda, usando o aplicativo de painel OSX (que nunca pareceu tão útil antes), podemos tornar este Contador de BPM extremamente rápido de usar.

Etapa 1: como deve ser a aparência?

Obviamente, a resposta à pergunta é uma questão de opinião. Minha posição é que ele deve ser super simples e fazer apenas o que um contador de BPM precisa para: contar batidas por minuto. Portanto, tudo o que precisa ser é um botão e um valor de contagem.

Etapa 2: a lógica

Estimar o BPM é tão fácil quanto medir o tempo entre duas batidas sequenciais e calcular quantas delas você caberia em um minuto.

deixe prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); intervalo const = (currentTime - prev_click) / 1000; const bpm = 60 / intervalo; prev_click = currentTime; return bpm; } get_bpm (); // por exemplo. 120

Eu fui mais além, calculando a média das 3 batidas anteriores, como esta:

média const = 3;

const prev_bpms = [60]; deixe prev_click = new Date () const getBPM = function () {const currentTime = new Date (); intervalo const = (currentTime - prev_click) / 1000; const bpm = 60 / intervalo; prev_click = currentTime; while (prev_bpms.length> prev_bpms_list_max_length) {prev_bpms.shift (); } prev_bpms.push (bpm); média_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; return bpm; } get_bpm (); // por exemplo. 120

Além disso, nem todo mundo quer pressionar o botão, mas talvez uma tecla:

// gatilho da barra de espaço

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // capacidade instantânea document.querySelector ('. botão do clicker'). focus ();

Agora, os usuários também podem tocar usando a barra de espaço assim que a página for carregada.

Etapa 3: Ouça seu BPM

Você tocou em seu BPM, mas agora quer reproduzi-lo para que possa tocar junto com seu tempo favorito.

Para fazer isso, devemos fazer um som. Mas como? Temos duas opções embutidas no navegador AudioAPI, usar um arquivo de som ou criar um sintetizador. Primeiro, usaremos o sintetizador para criar um bipe:

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

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

Agora vamos fazer algo semelhante usando um arquivo de áudio:

const click = new 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 adicionando a lógica que os controla:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('. botão do jogador'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (beep, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Etapa 4: juntando tudo

Agora juntando todos os recursos e adicionando um pouco de estilo (que não vou explicar), temos este produto final:

Não sei quanto código as pessoas realmente querem ver diretamente no artigo, então encontre o código completo em

Etapa 5: uso efetivo (somente usuários OSX)

Se você já usou um mac antes, pode ter tropeçado no aplicativo Dashboard nativo, mas provavelmente não terá ficado muito tempo.

Eu nunca usei realmente … até agora. No Safari, você pode clicar com o botão direito na página, o que às vezes faz com que uma seleção de ação apareça, incluindo abrir no painel …

Clicar nele irá revelar a você um criador de widget de página da web. Você pode selecionar parte da página que gostaria de adicionar ao seu painel. Este é um recurso muito legal, mas, para nosso caso, é um recurso muito legal. Abrindo o contador de BPM que acabamos de fazer, você pode selecionar a caixa como esta:

Agora use o atalho da tecla F12. ESTRONDO. Nunca foi tão fácil criar widgets sozinho, de forma rápida e fácil.

Etapa 6: Notas

Você pode estar se perguntando por que este não inclui o recurso de reprodução do metrônomo. Quando tentei usá-lo no painel, o programa não reproduzia o áudio de maneira confiável: (Mas pelo menos o Logic pode fazer essa parte facilmente.

E o motivo pelo qual mostrei como criar sons de duas maneiras diferentes é porque a versão Audio Context usando um sintetizador não funcionaria dentro do painel.

Finalmente, você não pode simplesmente clicar em F12 e continuar usando a barra de espaço para obter o tempo, você deve clicar no botão diretamente, o que é um downgrade. Mas eu acho que pode ser assim que eu faço pequenos widgets a partir de agora. Se você tiver alguma ideia legal para isso, mostre-me quando as tiver implementado:)

Inscreva-se na nossa lista de discussão!

E sim, dê uma olhada no T3chFlicks - nós fazemos coisas!