How I Built a Client-Side Audio Toolkit (No Server Uploads)

Як я створив аудіо-інструменти на стороні клієнта (без завантаження на сервер)

Проблема

Мені потрібно було додати обкладинку до файлу FLAC. Проста задача, правда?

Не так швидко. Усі рішення, які я знайшов, вимагали:

Встановлення десктопного програмного забезпечення (перебір для одноразового завдання)

Завантаження моїх файлів на сервер когось іншого (питання конфіденційності)

Оплати підписного сервісу (непотрібні витрати)

Як розробник, я вважав, що це вирішувана проблема. Отже, я створив браузерне рішення.

Рішення: FFmpeg.wasm

FFmpeg.wasm – це порт FFmpeg для WebAssembly, який працює повністю в браузері. Це означає, що ви можете виконувати складну обробку аудіо/відео без коду на стороні сервера.

Основна перевага: Файли ніколи не покидають пристрій користувача. Усе обробляється локально за допомогою WebAssembly.

Що я створив

Те, що починалось як простий редактор метаданих FLAC, перетворилось на повний аудіо-інструментарій:

Конвертер форматів – Конвертуйте між MP3, FLAC, WAV, AAC, OGG, M4A

Редактор метаданих – Додавайте обкладинку та редагуйте теги для аудіофайлів

Створювач сповільнених + ревербераційних ефектів – Створюйте сповільнене та ревербераційне аудіо (популярно для TikTok/vaporwave)

Обрізувач аудіо – Обрізайте та підрізайте аудіофайли з ефектами затухання

Відео в аудіо – Витягуйте аудіотреки з відеофайлів

Посилювач голосу – Збільшуйте гучність або нормалізуйте гучність аудіо

Жива демонстрація: soundtools.io

Технічна реалізація

Стек:

FFmpeg.wasm для обробки аудіо

Vanilla JavaScript (без фреймворків – просто)

Тільки на стороні клієнта – нульовий бекенд код

Основні виклики:

1. Ліниве завантаження FFmpeg

FFmpeg.wasm великий (~31MB для основного та wasm файлів). Миттєве завантаження знищує продуктивність сторінки.

Рішення: Ліниве завантаження за запитом. Сторінка завантажується миттєво лише з HTML/CSS. FFmpeg завантажується тільки коли користувач вибирає файл:

“`javascript
let ffmpeg = null;

async function loadFFmpeg() {
if (ffmpeg) return; // Вже завантажено

showStatus(‘Завантаження аудіопроцесора…’);

const { FFmpeg } = await import(‘../../ffmpeg/index.js’);
ffmpeg = new FFmpeg();

await ffmpeg.load({
coreURL: ‘../../ffmpeg/ffmpeg-core.js’,
wasmURL: ‘../../ffmpeg/ffmpeg-core.wasm’,
});

showStatus(‘Готовий до обробки!’);
}

// Завантажте лише коли користувач вибирає файл
fileInput.addEventListener(‘change’, async (e) => {
if (!ffmpeg) await loadFFmpeg();
// Тепер обробіть файл…
});
“`

Результат:

Початкове завантаження сторінки: ~50KB (швидко!)

FFmpeg завантажується у фоновому режимі, коли це потрібно: ~31MB

Користувачі отримують миттєву сторінку, FFmpeg готовий до вибору файлу.

2. Управління пам’яттю

Великі аудіофайли (500MB+) можуть виснажити пам’ять браузера. Рішення: Обробляйте частинами та активно очищайте пам’ять після кожної операції.

3. Продуктивність

WebAssembly швидкий, але не такий швидкий, як рідний. Для типових аудіофайлів (10-100MB) продуктивність прийнятна (10-30 секунд часу обробки).

4. Підтримка форматів файлів

Різні стандарти метаданих (ID3v2 для MP3, Vorbis Comments для FLAC, MP4 теги для M4A) вимагали специфічного оброблення.

Чому обробка на стороні клієнта важлива

Конфіденційність: Ваші аудіофайли містять метадані, особисті записи або авторське зміст. Обробка на стороні клієнта означає, що жодні дані не покидають ваш пристрій.

Витрати: Відсутність серверної інфраструктури означає відсутність витрат на хостинг. Увесь сайт працює як статичний HTML/JS.

Офлайн-можливості: Як тільки сторінка завантажена, інструменти працюють офлайн (після кешування FFmpeg.wasm).

Продуктивність: Ліниве завантаження FFmpeg означає, що сторінки завантажуються миттєво, поки важка обробка відбувається у фоновому режимі.

Що далі

Працюю над:

Об’єднувачем аудіо (злиття кількох файлів)

Видаленням вокалу (за допомогою AI/ML моделей у браузері)

Кращою оптимізацією для мобільних пристроїв

Спробуйте

Перевірте інструментарій на soundtools.io

Усі інструменти безкоштовні, обліковий запис не потрібен, немає відстеження.

Технічні Detалі

Для розробників, які цікавляться реалізацією FFmpeg.wasm, базовий шаблон:

“`javascript
// Завантажте FFmpeg (ліниво)
const ffmpeg = new FFmpeg();
await ffmpeg.load();

// Запишіть вхідний файл у віртуальну файлову систему
await ffmpeg.writeFile(‘input.mp3’, audioData);

// Виконайте команду FFmpeg
await ffmpeg.exec([‘-i’, ‘input.mp3’, ‘-codec:a’, ‘libmp3lame’, ‘output.mp3’]);

// Прочитайте вихідний файл
const data = await ffmpeg.readFile(‘output.mp3’);
“`

Справжня складність виникає під час обробки різних форматів, управління пам’яттю, створення чистого інтерфейсу навколо процесу обробки та оптимізації продуктивності завантаження сторінки за допомогою лінивого завантаження.

Зворотний зв’язок вітається

Буду радий почути думки щодо:

Продуктивності з вашими аудіофайлами

Яких інструментів ви вважаєте найбільш корисними

Які ще інструменти для аудіо були б корисними

Я створив це як побічний проект для вирішення своєї власної проблеми. Сподіваюся, буде корисно і для інших.

HI-FI Новини

через DEV Community: javascript

5 грудня 2025 року о 06:20 PM

December 5, 2025 at 06:20PM