Обработка аудио в реальном времени

Библиотека ml5.js предоставляет высокоуровневый интерфейс для работы с моделями машинного обучения в браузере, включая возможности обработки аудио. Она строится поверх TensorFlow.js и облегчает интеграцию нейросетевых моделей в проекты на JavaScript, включая работу с микрофоном, аудиопотоками и классификацией звука в реальном времени.

Подключение ml5.js и настройка аудиопотока

Для начала необходимо подключить библиотеку через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ml5/2.3.0/ml5.min.js"></script>

Инициализация микрофона происходит с помощью объекта p5.AudioIn:

let mic;

function setup() {
    createCanvas(400, 200);
    mic = new p5.AudioIn();
    mic.start();
}

Ключевым моментом является вызов mic.start(), который запрашивает доступ к устройству ввода и начинает поток аудио для дальнейшей обработки.

Работа с классификацией звука

ml5.js предлагает высокоуровневую модель SoundClassifier для распознавания аудио в реальном времени. Основные шаги:

  1. Подключение и загрузка модели.
  2. Получение аудиопотока с микрофона.
  3. Получение результатов классификации и вероятностей.

Пример использования:

let classifier;

function preload() {
    const options = { probabilityThreshold: 0.7 };
    classifier = ml5.soundClassifier('SpeechCommands18w', options);
}

function setup() {
    createCanvas(400, 200);
    classifier.classify(gotResult);
}

function gotResult(error, results) {
    if (error) {
        console.error(error);
        return;
    }
    console.log(results[0].label, results[0].confidence);
}

Пояснение ключевых моментов:

  • 'SpeechCommands18w' — предобученная модель для распознавания голосовых команд.
  • probabilityThreshold позволяет фильтровать результаты с низкой вероятностью.
  • results[0] содержит наиболее вероятную метку и её доверие (confidence).

Визуализация аудиопотока

Для реального времени часто требуется не только классификация, но и визуализация уровня громкости и частоты звука. p5.js предоставляет удобные инструменты для этого:

let mic, fft;

function setup() {
    createCanvas(600, 400);
    mic = new p5.AudioIn();
    mic.start();

    fft = new p5.FFT();
    fft.setInput(mic);
}

function draw() {
    background(0);
    let spectrum = fft.analyze();
    noStroke();
    fill(0, 255, 0);
    for (let i = 0; i < spectrum.length; i++) {
        let x = map(i, 0, spectrum.length, 0, width);
        let h = -height + map(spectrum[i], 0, 255, height, 0);
        rect(x, height, width / spectrum.length, h);
    }
}

Ключевые моменты:

  • p5.FFT() позволяет анализировать спектр аудио в реальном времени.
  • Метод fft.analyze() возвращает массив амплитуд для каждой частоты.
  • Использование rect() с map() помогает визуализировать спектр на канвасе.

Применение аудио в интерактивных проектах

С помощью ml5.js аудиопоток может быть использован для:

  • Управления элементами интерфейса голосом.
  • Создания музыкальных визуализаций.
  • Реализации интерактивных игр с откликом на звук.
  • Детекции шумов и событий окружающей среды.

Пример простого взаимодействия:

function gotResult(error, results) {
    if (error) return console.error(error);

    let label = results[0].label;
    if (label === 'clap') {
        background(random(255), random(255), random(255));
    } else if (label === 'snap') {
        ellipse(random(width), random(height), 50, 50);
    }
}

Здесь звуковые команды «clap» и «snap» вызывают динамическое изменение визуального отображения, что демонстрирует потенциал реального времени в интерактивной среде.

Особенности и ограничения

  • Задержка аудиопотока зависит от браузера и производительности устройства. Обычно она составляет 100–200 мс.
  • Качество распознавания моделей ограничено обучающим набором данных. Для специализированных задач может потребоваться дообучение.
  • Поддержка браузеров: современные версии Chrome, Firefox и Edge поддерживают потоковое аудио и работу с ml5.js, Safari имеет некоторые ограничения на автоматический старт микрофона.

Расширенные возможности

  • Дообучение моделей в браузере с использованием transfer learning. Например, можно создать свою модель для классификации специфических звуков.
  • Комбинирование с визуализацией на WebGL через p5.js для создания эффектных интерактивных инсталляций.
  • Интеграция с другими сенсорами для мультимодальных приложений: звук + движение + видео.

ml5.js предоставляет удобный и мощный инструмент для работы с аудио в реальном времени, позволяя объединять машинное обучение и интерактивную графику на JavaScript без необходимости глубокого погружения в низкоуровневое программирование нейросетей.

Оглавление