Направете вашите собствени джаджи лесно - Бърз BPM брояч: 6 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:50

Уеб приложенията са често срещано място, но уеб приложенията, които не изискват достъп до интернет, не са.

В тази статия ще ви покажа как направих BPM брояч в обикновена HTML страница, съчетана с ванилов javascript (вижте тук). Ако е изтеглена, тази джаджа може да се използва офлайн - идеална за музиканти, които искат да създават, но не винаги имат достъп до интернет. Още по -добре, като използваме приложението на таблото за управление на OSX (което никога преди не изглеждаше толкова полезно), можем да направим този BPM брояч изключително бърз за използване.

Стъпка 1: Как трябва да изглежда?

Очевидно отговорът на въпроса е въпрос на мнение. Моята позиция е, че тя трябва да бъде супер проста и да прави само това, което трябва на брояча на BPM: да брои ударите на минута. Следователно всичко, което трябва да бъде, е бутон и стойност на броене.

Стъпка 2: Логиката

Изчисляването на BPM е толкова лесно, колкото измерването на времето между два последователни удара и изчисляването на колко от тях можете да поберете за минута.

нека prev_click = нова дата (); const getBPM = function () {const currentTime = нова дата (); const interval = (currentTime - prev_click)/1000; const bpm = 60/интервал; prev_click = currentTime; връщане bpm; } get_bpm (); // напр. 120

Взех това по -нататък, като осредних 3 -те предишни удара по следния начин:

усредняване на const = 3;

const prev_bpms = [60]; нека prev_click = new Date () const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click) / 1000; const bpm = 60 / интервал; 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; връщане bpm; } get_bpm (); // напр. 120

Също така не всеки иска да натисне бутона, но може би вместо него ключ:

// задействане на интервал

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // незабавна способност document.querySelector ('. бутон за щракване'). focus ();

Сега потребителите също могат да докоснат с помощта на интервала веднага след като страницата се зареди.

Стъпка 3: Чуйте своя BPM

Включили сте своя BPM, но сега искате да го възпроизведете, за да можете да свирите с любимото си темпо.

За да направим това, трябва да издадем звук. Но как? В браузъра AudioAPI имаме две опции, използвайте звуков файл или създайте синтезатор. Първо ще използваме синтезатора, за да създадем звуков сигнал:

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

нека контекст, осцилатор; const bpm = 60; const bpmInterval = 60/bpm * 1000; // mssetInterval (звуков сигнал, bpmInterval); const beep = function () {if (! context) context = new AudioContext (); осцилатор = context.createOscillator (); oscillator.type = "sinus"; oscillator.start (0); oscillator.connect (context.destination); setTimeout (oscillator.disconnect, 150, context.destination); }

Сега нека направим подобно нещо, като използваме аудио файл вместо това:

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); };

Накрая добавете логиката, която ги контролира:

// JSlet isPlayerPlaying = false;

нека bpmRepeaterId; const togglePlayerOutput = function () {const button = document.querySelector ('бутон на плейъра'); if (! isPlayerPlaying) {button.innerHTML = '◼'; bpmRepeaterId = setInterval (звуков сигнал, bpmInterval); } else {button.innerHTML = '▶'; clearInterval (bpmRepeaterId); } isPlayerPlaying =! isPlayerPlaying; };

Стъпка 4: Съберете всичко заедно

Събирайки всички функции заедно и добавяйки малко стилизиране (което няма да обяснявам), имаме този краен продукт:

Не знам колко код наистина искат хората да видят директно в статията, затова намерете пълния код на

Стъпка 5: Ефективно използване (само за потребители на OSX)

Ако сте използвали Mac преди, може да сте попаднали на родното приложение за табло, но вероятно няма да останете дълго.

Никога не съм го използвал наистина … до сега. В Safari можете да щракнете с десния бутон върху страницата, което понякога води до изскачане на избор на действие, включително отваряне в таблото за управление …

Щракването върху това ще ви разкрие създателя на приспособления за уеб страница. Можете да изберете част от страницата, която искате да добавите към таблото си за управление. Това е доста готина функция, но за нашия случай това е супер готина функция. Отваряйки току -що направения BPM брояч, можете да изберете полето по следния начин:

Сега използвайте прекия път на клавиша F12. БУМ. Никога не е било толкова лесно да създавате джаджи сами, бързо и лесно.

Стъпка 6: Бележки

Може би се чудите защо този не включва функцията за възпроизвеждане на метроном. Когато се опитах да го използвам в таблото за управление, програмата нямаше да възпроизведе надеждно звука: (Но поне Logic може лесно да направи тази част.

Причината, поради която ви показах как да създавате звуци по два различни начина, е, че версията Audio Context, използваща синтезатор, няма да работи в таблото за управление.

И накрая, не можете просто да щракнете върху F12 и да продължите да използвате интервала, за да получите темпото, трябва да кликнете директно върху бутона, което е понижаване на рейтинга. Но мисля, че оттук насетне мога да правя малки джаджи. Ако имате страхотни идеи за това, покажете ми, когато ги приложите:)

Регистрирайте се в нашия пощенски списък!

И да, вижте T3chFlicks - ние правим неща!