Créez facilement vos propres widgets - Compteur BPM rapide : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Les applications Web sont courantes, mais les applications Web qui ne nécessitent pas d'accès à Internet ne le sont pas.

Dans cet article je vous montre comment j'ai réalisé un compteur BPM dans une simple page HTML couplée à du javascript vanilla (voir ici). S'il est téléchargé, ce widget peut être utilisé hors ligne - idéal pour les musiciens qui souhaitent créer mais n'ont pas toujours accès à Internet. Mieux encore, en utilisant l'application de tableau de bord OSX (qui n'a jamais semblé aussi utile auparavant), nous pouvons rendre ce compteur BPM très rapide à utiliser.

Étape 1: à quoi devrait-il ressembler ?

De toute évidence, la réponse à la question est une question d'opinion. Ma position est que cela devrait être très simple et ne faire que ce dont un compteur BPM a besoin: compter les battements par minute. Par conséquent, il suffit d'un bouton et d'une valeur de comptage.

Étape 2: La logique

Estimer le BPM est aussi simple que de mesurer le temps entre deux battements séquentiels et de calculer combien d'entre eux vous pourriez en tenir en une minute.

let prev_click = new Date();const getBPM = function (){ const currentTime = new Date(); intervalle const = (currentTime - prev_click)/1000; const bpm = 60/intervalle; prev_click = currentTime; retour bpm; } get_bpm(); // par exemple. 120

Je suis allé plus loin en faisant la moyenne des 3 temps précédents comme ceci:

moyenne const = 3;

const prev_bpms = [60]; let prev_click = new Date() const getBPM = function() { const currentTime = new Date(); intervalle const = (currentTime - prev_click) / 1000; const bpm = 60 / intervalle; prev_click = currentTime; while (prev_bpms.length > prev_bpm_list_max_length) { prev_bpms.shift(); } prev_bpms.push(bpm); moyenne_bpm = prev_bpms.reduce((acc, cVal) => acc + cVal) / prev_bpms.length; retour bpm; } get_bpm(); // par exemple. 120

De plus, tout le monde ne veut pas appuyer sur le bouton mais peut-être plutôt sur une touche:

// déclencheur de la barre d'espace

window.addEventListener('keypress', (e) => { if(e.code === 32) getBPM(); }); // capacité instantanée document.querySelector('.clicker button').focus();

Désormais, les utilisateurs peuvent également appuyer sur la barre d'espace dès que la page est chargée.

Étape 3: Écoutez votre BPM

Vous avez tapé dans votre BPM, mais maintenant vous voulez le lire pour pouvoir jammer à votre tempo préféré.

Pour ce faire, nous devons faire du son. Mais comment? Nous avons deux options intégrées au navigateur AudioAPI, utiliser un fichier son ou créer un synthétiseur. Nous allons d'abord utiliser le synthétiseur pour créer un bip:

constContexteAudio = fenêtre. ContexteAudio || window.webkitAudioContext;

let context, oscillateur;const bpm = 60; const bpmInterval = 60/bpm * 1000; //mssetInterval(bip, bpmInterval); const bip = function (){ if(!context) context = new AudioContext(); oscillateur = context.createOscillator(); oscillator.type = "sine"; oscillateur.start(0); oscillator.connect(context.destination); setTimeout(oscillator.disconnect, 150, context.destination); }

Faisons maintenant une chose similaire en utilisant un fichier audio à la place:

clic const = new Audio('./cowbell.mp3');

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

Enfin en ajoutant la logique qui les contrôle:

// JSlet isPlayerPlaying = false;

let bpmRepeaterId; const togglePlayerOutput = function (){ const button = document.querySelector('.player button'); if (!isPlayerPlaying){ button.innerHTML = '◼'; bpmRepeaterId = setInterval(bip, bpmInterval); } else{ button.innerHTML = '▶'; clearInterval(bpmRepeaterId); } isPlayerPlaying = !isPlayerPlaying; };

Étape 4: Tout assembler

Maintenant, en rassemblant toutes les fonctionnalités et en ajoutant un peu de style (que je ne vais pas expliquer), nous avons ce produit final:

Je ne sais pas combien de code les gens veulent vraiment voir directement dans l'article, alors trouvez le code complet sur

Étape 5: Utilisation efficace (utilisateurs OSX uniquement)

Si vous avez déjà utilisé un mac auparavant, vous êtes peut-être tombé sur l'application Dashboard native, mais vous ne serez probablement pas resté longtemps.

Je ne l'ai jamais vraiment utilisé… jusqu'à maintenant. Dans Safari, vous pouvez cliquer avec le bouton droit sur la page, ce qui provoque parfois l'apparition d'une sélection d'action, y compris l'ouverture dans le tableau de bord…

En cliquant dessus, vous découvrirez un créateur de widget de page Web. Vous pouvez sélectionner une partie de la page que vous souhaitez ajouter à votre tableau de bord. C'est une fonctionnalité plutôt cool, mais pour notre cas, c'est une fonctionnalité super cool. En ouvrant le compteur BPM que nous venons de créer, vous pouvez sélectionner la case comme ceci:

Utilisez maintenant le raccourci de la touche F12. BOOM. Il n'a jamais été aussi simple de créer des widgets vous-même, rapidement et facilement.

Étape 6: Remarques

Vous vous demandez peut-être pourquoi celui-ci n'inclut pas la fonction de lecture de métronome. Lorsque j'ai essayé de l'utiliser dans le tableau de bord, le programme ne lisait pas l'audio de manière fiable: (Mais au moins Logic peut facilement faire cette partie.

Et la raison pour laquelle je vous ai montré comment créer des sons de deux manières différentes est que la version Audio Context utilisant un synthétiseur ne fonctionnerait pas dans le tableau de bord.

Enfin, vous ne pouvez pas simplement cliquer sur F12 et continuer à utiliser la barre d'espace pour obtenir le tempo, vous devez cliquer directement sur le bouton, ce qui est une rétrogradation. Mais je pense que c'est peut-être ainsi que je créerai des petits widgets à partir de maintenant. Si vous avez des idées sympas pour cela, montrez-moi quand vous les avez mises en œuvre:)

Inscrivez-vous à notre liste de diffusion !

Et oui, regardez T3chFlicks - nous fabriquons des trucs !