Erstellen Sie ganz einfach Ihre eigenen Widgets - Schneller BPM-Zähler - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Web-Apps sind üblich, Web-Apps, die keinen Internetzugang benötigen, jedoch nicht.

In diesem Artikel zeige ich Ihnen, wie ich einen BPM-Zähler in einer einfachen HTML-Seite in Verbindung mit Vanille-Javascript erstellt habe (siehe hier). Wenn es heruntergeladen wird, kann dieses Widget offline verwendet werden - ideal für Musiker, die erstellen möchten, aber nicht immer einen Internetzugang haben. Noch besser: Durch die Verwendung der OSX-Dashboard-App (die vorher nie so nützlich erschien) können wir diesen BPM-Zähler besonders schnell verwenden.

Schritt 1: Wie soll es aussehen?

Die Beantwortung der Frage ist natürlich Ansichtssache. Meine Haltung ist, dass es super einfach sein sollte und nur das tun sollte, was ein BPM-Zähler braucht: Beats Per Minute zählen. Daher muss es nur ein Knopf und ein Zählwert sein.

Schritt 2: Die Logik

Die Schätzung des BPM ist so einfach wie das Messen der Zeit zwischen zwei aufeinanderfolgenden Schlägen und die Berechnung, wie viele davon in eine Minute passen.

let prev_click = new Date();const getBPM = function(){ const currentTime = new Date(); const interval = (currentTime - prev_click)/1000; konstant bpm = 60/Intervall; prev_click = aktuelleZeit; bpm zurück; } get_bpm(); // z. B. 120

Ich habe dies weitergeführt, indem ich die 3 vorherigen Beats wie folgt gemittelt habe:

konstante Mittelwertbildung = 3;

const prev_bpms = [60]; let prev_click = new Date() const getBPM = function() { const currentTime = new Date(); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / Intervall; prev_click = aktuelleZeit; 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; bpm zurück; } get_bpm(); // z. B. 120

Außerdem möchte nicht jeder den Knopf drücken, sondern vielleicht stattdessen eine Taste:

// Leertaste auslösen

window.addEventListener('keypress', (e) => { if(e.code === 32) getBPM(); }); // sofortige Fähigkeit document.querySelector('.clicker button').focus();

Benutzer können jetzt auch mit der Leertaste tippen, sobald die Seite geladen ist.

Schritt 3: Hören Sie Ihre BPM

Sie haben Ihren BPM eingetippt, möchten ihn jetzt aber wiedergeben, damit Sie zu Ihrem Lieblingstempo jammen können.

Dazu müssen wir Geräusche machen. Aber wie? Wir haben zwei Optionen, die in die AudioAPI des Browsers integriert sind, eine Sounddatei verwenden oder einen Synthesizer erstellen. Wir verwenden zuerst den Synthesizer, um einen Signalton zu erzeugen:

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

let Kontext, Oszillator;const bpm = 60; const bpmInterval = 60/bpm * 1000; //mssetInterval (Beep, bpmInterval); const beep = function (){ if(!context) context = new AudioContext(); Oszillator = context.createOscillator(); oszillator.typ = "sinus"; oszillator.start(0); oszillator.connect(context.destination); setTimeout(oscillator.disconnect, 150, context.destination); }

Lassen Sie uns jetzt stattdessen eine ähnliche Sache mit einer Audiodatei machen:

const click = new Audio(‘./cowbell.mp3’);

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

Fügen Sie schließlich die Logik hinzu, die sie steuert:

// JSlet isPlayerPlaying = false;

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

Schritt 4: Alles zusammenfügen

Wenn wir nun alle Funktionen zusammenstellen und ein wenig Styling hinzufügen (was ich nicht erklären werde), haben wir dieses Endprodukt:

Ich weiß nicht, wie viel Code die Leute wirklich direkt im Artikel sehen möchten, also finden Sie den vollständigen Code unter

Schritt 5: Effektive Nutzung (nur OSX-Benutzer)

Wenn Sie schon einmal einen Mac verwendet haben, sind Sie vielleicht über die native Dashboard-App gestolpert, aber Sie werden wahrscheinlich nicht lange geblieben sein.

Ich habe es nie wirklich benutzt … bis jetzt. In Safari können Sie mit der rechten Maustaste auf die Seite klicken, was manchmal dazu führt, dass eine Aktionsauswahl angezeigt wird, einschließlich im Dashboard öffnen…

Wenn Sie darauf klicken, wird Ihnen ein Webseiten-Widget-Ersteller angezeigt. Sie können einen Teil der Seite auswählen, den Sie Ihrem Dashboard hinzufügen möchten. Dies ist eine ziemlich coole Funktion, aber für unseren Fall ist es eine super coole Funktion. Wenn Sie den gerade erstellten BPM-Zähler öffnen, können Sie das Feld wie folgt auswählen:

Verwenden Sie nun die Tastenkombination der Taste F12. BOOM. Es war noch nie so einfach, Widgets schnell und einfach selbst zu erstellen.

Schritt 6: Notizen

Sie fragen sich vielleicht, warum dieses Gerät die Metronom-Wiedergabefunktion nicht enthält. Als ich versuchte, es im Dashboard zu verwenden, spielte das Programm das Audio nicht zuverlässig aus:(Aber zumindest kann Logic diesen Teil problemlos erledigen.

Und der Grund, warum ich Ihnen gezeigt habe, wie Sie Sounds auf zwei verschiedene Arten erstellen, ist, dass die Audio Context-Version mit einem Synthesizer im Dashboard nicht funktioniert.

Schließlich können Sie nicht einfach auf F12 klicken und mit der Leertaste fortfahren, um das Tempo zu erhalten, Sie müssen direkt auf die Schaltfläche klicken, was eine Herabstufung darstellt. Aber ich denke, so mache ich von nun an kleine Widgets. Wenn du dafür coole Ideen hast, zeig es mir, wenn du sie umgesetzt hast:)

Tragen Sie sich in unsere Mailingliste ein!

Und ja, sieh dir T3chFlicks an - wir machen Sachen!