Легко создавайте свои собственные виджеты - Быстрый счетчик ударов в минуту: 6 шагов

2025 Автор: John Day | [email protected]. Последнее изменение: 2025-01-23 15:04

Веб-приложения - обычное дело, но веб-приложения, не требующие доступа в Интернет, - нет.

В этой статье я покажу вам, как я сделал счетчик BPM на простой HTML-странице в сочетании с ванильным javascript (см. Здесь). После загрузки этот виджет можно использовать в автономном режиме - идеально подходит для музыкантов, которые хотят творить, но не всегда имеют доступ в Интернет. Более того, используя приложение панели управления OSX (которое раньше никогда не казалось таким полезным), мы можем сделать этот счетчик BPM более быстрым в использовании.

Шаг 1. Как это должно выглядеть?

Очевидно, что ответ на вопрос - это вопрос личного мнения. Я считаю, что он должен быть очень простым и делать только то, что нужно счетчику BPM: считать количество ударов в минуту. Следовательно, все, что для этого нужно, - это кнопка и значение счетчика.

Шаг 2: логика

Оценить BPM так же просто, как измерить время между двумя последовательными ударами и подсчитать, сколько из них вы можете уместить в минуту.

пусть prev_click = new Date (); const getBPM = function () {const currentTime = new Date (); const interval = (currentTime - prev_click) / 1000; const уд / мин = 60 / интервал; prev_click = currentTime; возврат ударов в минуту; } 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 уд / мин = 60 / интервал; prev_click = currentTime; while (prev_bpms.length> prev_bpm_list_max_length) {prev_bpms.shift (); } prev_bpms.push (ударов в минуту); average_bpm = prev_bpms.reduce ((acc, cVal) => acc + cVal) / prev_bpms.length; возврат ударов в минуту; } get_bpm (); // например 120

Кроме того, не все хотят нажимать кнопку, а вместо этого может быть клавиша:

// триггер пробела

window.addEventListener ('keypress', (e) => {if (e.code === 32) getBPM ();}); // мгновенная возможность document.querySelector ('. clicker button'). focus ();

Теперь пользователи также могут касаться с помощью пробела, как только страница загрузится.

Шаг 3. Слушайте свой BPM

Вы установили свой BPM, но теперь хотите воспроизвести его, чтобы поджемовать в своем любимом темпе.

Для этого мы должны издать звук. Но как? У нас есть две опции, встроенные в браузер AudioAPI: использовать звуковой файл или создать синтезатор. Сначала мы воспользуемся синтезатором, чтобы создать звуковой сигнал:

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

let context, осциллятор; const bpm = 60; const bpmInterval = 60 / уд / мин * 1000; // mssetInterval (beep, bpmInterval); const beep = function () {если (! context) context = new AudioContext (); осциллятор = context.createOscillator (); осциллятор.type = "синус"; осциллятор.старт (0); осциллятор.connect (context.destination); setTimeout (осциллятор.disconnect, 150, context.destination); }

Теперь давайте сделаем то же самое, используя вместо этого аудиофайл:

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

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

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

// JSlet isPlayerPlaying = false;

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

Шаг 4. Собираем все вместе

Теперь, объединив все функции и добавив немного стиля (который я не собираюсь объяснять), мы получили этот конечный продукт:

Я не знаю, сколько кода люди действительно хотят видеть прямо в статье, поэтому полный код можно найти на

Шаг 5. Эффективное использование (только для пользователей OSX)

Если вы раньше использовали Mac, возможно, вы наткнулись на собственное приложение Dashboard, но, вероятно, надолго не задержались.

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

Щелчок по нему откроет вам создателя виджета веб-страницы. Вы можете выбрать часть страницы, которую хотите добавить в свою панель управления. Это довольно крутая функция, но для нашего случая это очень крутая функция. Открыв только что созданный счетчик BPM, вы можете выбрать следующее поле:

Теперь воспользуйтесь сочетанием клавиш F12. БУМ. Еще никогда не было так просто создавать виджеты самостоятельно, быстро и легко.

Шаг 6: Примечания

Вам может быть интересно, почему здесь нет функции воспроизведения метронома. Когда я попытался использовать его на панели управления, программа не могла надежно воспроизвести звук: (Но, по крайней мере, Logic может легко это сделать.

И причина, по которой я показал вам, как создавать звуки двумя разными способами, заключается в том, что версия Audio Context, использующая синтезатор, не будет работать внутри приборной панели.

Наконец, вы не можете просто нажать F12 и перейти к использованию клавиши пробела для определения темпа, вы должны нажать кнопку напрямую, что означает переход на более раннюю версию. Но я думаю, что теперь, возможно, именно так я и делаю маленькие виджеты. Если у вас есть какие-нибудь крутые идеи по этому поводу, покажите мне, когда вы их реализовали:)

Подпишитесь на нашу рассылку!

И да, посмотрите T3chFlicks - мы делаем вещи!