Мотивация

Когда-то я занимался спортивными парными танцами. Часто на тренировках была необходимость узнать темп (или скорость, если немного подушнить насчёт терминов) играющего трека, который измеряется в "ударах в минуту" (beats per minute, bpm)

Спортсмены используют для этого разные сайты/приложения, где нужно пальцем "протапать" ритм. Я и сам таким пользовался, но однажды я задался вопросом — смогу ли я сделать браузерный сервис, который сможет определять bpm из записанного через микрофон аудио

Эта статья как раз о том, как я его сделал

Я не буду вдаваться в тонкости реализации непосредственно UI: у меня уже был на момент начала разработки пет-проект на React, и сервис я решил делать на базе него.

Принцип работы

Дадим возможность пользователю один раз тапнуть на кнопку Анализировать и будет показывать ему вычисляемый bpm, назовём его B, который со временем (с каждой итерацией анализа) будем уточнять:

Запускаем i-ый анализ
Записываем звук с микрофона длиной t_i
Вычисляем темп b_i
Уточняем значение B на основе b_i

После всех итераций значение B и будет тем bpm, что мы ищем.

Пока каждый пункт звучит мутно (кроме первого, пожалуй). Распишем их подробнее

Итерации анализа bpm

Определимся с количеством итераций, пусть это будет n. Так как мы будем записывать звук "кусками", то определим массив t_i их длин. Я экспериментировал с разными значениям t_i:

t_i = F_i, где F_i — i-ое число Фибоначчи
t_i = 2 * i
t_i = 2^i

В итоге остановился на варианте ∀i, t_i = t_0, где t_0 — константа.

В итоговой реализации взял значения n = 10 и t_0=6

Запись звука

Будем аписывать звук с микрофона через AudioWorklet, собирать сэмплы в Float32Array, а потом складывать их в AudioBuffer, который можно использовать для анализа.

Если расписывать этот этап подробнее по шагам, то получится следующее:

Получение доступа к микрофону
Создание AudioContext
Создание AudioWorklet для захвата аудиоданных
Подключение AudioWorklet к AudioContext
Подключение микрофона к ворклету
Сбор аудиоданных
Финальная сборка в AudioBuffer
Возврат результата

Код можно посмотреть здесь

Вычисление темпа bi

Сделаем метод getBPMFromAudioBuffer, который вычисляет примерный темп b_i трека из аудиобуфера, анализируя пики энергии сигнала (предполагаемые удары) и измеряя интервалы между ними.

Распишем пошагово, что будет делать метод

Преобразование звука в моно

На каждой позиции берётся среднее значение левого и правого канала. Это упрощает дальнейшую обработку.

Разделение сигнала на окна и расчёт энергии

Сигнал разбивается на кусочки (или "окна", в моём случае такой hopSize = 512 сэмплов). Для каждого куска считается энергия ("громкость" в каждом фрагменте времени): сумма квадратов амплитуд в окне.

Поиск пиков энергии (ударов)

Вычисляется средняя энергия по всему сигналу. Удар (onset) считается найденным, если

энергия окна выше средней
энергия локально максимальна (больше соседей слева и справа)
время удара рассчитывается из номера окна и длины сэмплов

Расчёт bpm по интервалам между ударами

Находятся интервалы между ударами (в секундах). Оставляются только интервалы, которые соответствуют 30–240 BPM, чтобы убрать шум. Из каждого интервала считается bpm = 60 / interval. Собирается гистограмма (сколько раз встречался каждый bpm). Выбирается самый частый bpm — он считается результатом bi для i-ого анализа.

Код можно посмотреть здесь

Уточнение итогово значения темпа B

После каждого анализа мы хотим обновлять итоговое значение, применяя некий метод для уже посчитанных b_i.

Имперически получилось выяснить, что среднее и медиана не дают близкий к реальности результат, в отличие от экспоненциальгого скользящего среднего (ema) с коэффициентом α = 0.2, точность которого составила 95% на тестовых данных.

B = ema(b_i)

Код можно посмотреть здесь

Итог

После выполнения всех итераций итоговым темпом играющего трека будет значение B.

Посмотреть реализацию можно на Radio Hustle

Оригинальная статья на GitHub

Определение bpm (beats per minute) в браузере