spectro

? Спектр

Spectro является генератором аудио-спектрограммы в реальном времени для Интернета. Он может визуализировать звук из вашего микрофона или аудиофайлов на вашем устройстве.

Использование

Отправляйтесь сюда, чтобы начать использовать Spectro.

Чтобы начать генерировать спектрограмму, вы можете либо:

• Нажмите ? Запишите с кнопки MIC , чтобы начать генерировать спектрограмму из вашего микрофона.

  Если вы хотите записать звук из аудио -вывода вашего устройства, вы можете включить «Stereo Mix» в Windows или использовать Blackhole на MacOS, а затем установить это устройство в качестве устройства ввода вашего браузера по умолчанию.

• Нажмите ? Воспроизвести кнопку Audio File , чтобы начать генерировать спектрограмму из аудиофайла на вашем устройстве. Это также будет воспроизводиться выбранным аудиофайлом.

  Любой аудиоформат, поддерживаемый вашим браузером, может быть сыгран.

Спектрограмма генерирует справа налево , а самый последний звук появляется справа и самым старым слева.

Есть также ⚙ варианты, доступные для управления внешним видом спектрограммы:

• ? Чувствительность контролирует, насколько чувствительна спектрограмма к аудио. Изменение его имеет тот же эффект, что и изменение объема аудио.
• ? Контраст применяет логарифмическое масштабирование к спектрограмму, чтобы добавить контраст к изображению. Изменение его может помочь создать лучшее изображение в зависимости от анализа звука.
• ? Увеличение Zoom контролирует, как увеличивается масштаб в спектрограмме вдоль оси времени.
• ? Мин и макс. Управление частотой диапазон частот для отображения на спектрограмме. Более низкие частоты появляются в нижней части спектрограммы и более высокие частоты вверху.
• ? Шкала частоты управляет масштабированием, чтобы применить к частотной оси спектрограммы. «Линейный» означает, что все частоты представлены равномерно, в то время как «MEL» дает более естественный вид, придавая больший вес более низким частотам.
• ? Цвет управляет цветовой схемой, чтобы отобразить спектрограмму.

Вы можете нажать кнопку ⏹ Stop , чтобы прекратить генерировать спектрограмму. Если воспроизводить аудиофайл, спектрограмма автоматически остановится в конце трека.

❓ FAQ

Что такое спектрограмма?

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

Например, если бы вы генерировали спектрограмму себя свист, вы бы увидели яркую линию на поле свистка.

С какими браузерами работают Spectro?

Последние версии Chrome, Firefox и Safari работают со Spectro. Любой другой браузер на основе хрома, такой как новая версия Microsoft Edge, также должен работать.

Как работает Spectro?

Вот сообщение в блоге, описывающее все это! Быстрый обзор:

• Аудио вход разбит на рамки 4096 образцов, которые перекрываются каждые 1024 образцов. Я выбрал 4096 в качестве размера своего окна, так как он был лучшим компромиссом между временем и частотным разрешением-в конечном итоге я мог бы сделать его настраиваемым.
• Эти перекрывающиеся рамки затем находятся в окне с использованием семилетней функции Blackman-Harris, которую я определил, поскольку она, казалось, давала наиболее визуальную ясность.
• Затем окна выполняются через быстрое преобразование Фурье (с использованием JSFFT) в специализированном веб -работнике, и норму каждого частотного корзина принимается в качестве основы спектрограммы.
• Эти необработанные данные спектрограммы затем вставляются в круговую очередь, которая имеет емкость, равную ширине изображения спектрограммы.
• Данные необработанного спектрограммы затем отображаются на экране с помощью WebGL, используя шейдер для быстрого выполнения всего масштабирования, колоризации и других регулировки изображений непосредственно на графическом процессоре. Только новые данные необработанной спектрограммы загружаются в GPU каждый кадр, чтобы повысить производительность вместо полной загрузки.
• Панель «Настройки» использует React и Material-UI (который учитывает большую часть размера пакета?).

?разработка

Установить зависимости:

 npm install

Start Webpack-dev-server:

 npm start

Создайте производственный пакет:

 npm run build

Выполнить проверку типа типа:

 npm run type-check

Лицензия

Spectro выпускается в соответствии с условиями лицензии MIT.