CHISTO

Rip Audio Out of Any Video Without Uploading It

—

від

admin
у

Rip Audio Out of Any Video Without Uploading It

https://ift.tt/D9hdxTz

Знайшли чудовий саундтрек, захований у записі з YouTube? Потрібно окреме аудіо з запису екрана як файл? А може, ви просто хочете перетворити музичне відео на MP3 для вашого плейлиста. Видобуток аудіо з відео — одна з тих задач, яка здається надто простою, поки реально не потрібно її виконати.

Більшість інструментів вимагють спочатку завантажити все відео. Це повільно, витрачає пропускну здатність і виглядає абсурдно, коли потрібне саме аудіо. Ми створили аудіоекстрактор, що повністю працює у вашому браузері. Перетягніть відео, оберіть формат і завантажте аудіодоріжку. Відеофайл ніколи не залишає ваш комп’ютер.

Чому витяг аудіо в браузері?

Витяг аудіо насправді відмінно підходить для обробки на стороні клієнта:

  • Ніякого завантаження не потрібно: Чому надсилати 500 МБ відео на сервер лише для видалення 5 МБ аудіо?
  • Миттєвий старт: Ніяких черг, ніякого очікування за іншими завданнями користувачів.
  • Приватність: Ваше відео залишається локальним. Ми ніколи не бачимо його, не чуємо і не зберігаємо його.
  • Обирайте формат: MP3 для сумісності, WAV для редагування, FLAC для архівування — вирішуйте самі.
  • Працює офлайн: Після того як FFmpeg.wasm буде кешований, ви зможете витягати аудіо без підключення до Інтернету.

Єдиний справжній ліміт — це обсяг пам’яті вашого пристрою. Але оскільки ми обробляємо лише аудіопотік, навіть великі відео обробляються досить швидко.

Повний процес

Ось що відбувається від завантаження до завантаження аудіо:

The Data Model

Ми відстежуємо файл відео та те, чи дійсно в ньому є аудіодоріжка: 

interface VideoFile {
  id: string;
  file: File;
  previewUrl: string;
  audioUrl?: string;
  audioFileName?: string;
  hasAudio?: boolean;
  audioCodec?: string;
  error?: string;
  processing?: boolean;
  progress?: number;
  videoWidth?: number;
  videoHeight?: number;
  duration?: number;
}

Поле hasAudio має значення, адже не кожен відеофайл містить аудіодоріжку. Записи екрана без мікрофона, сирі кадри з камери та деякі завантажені кліпи можуть бути лише відео. Ми обходимо це безпечно, замість того щоб викидати cryptic-помилку.

П’ять аудіоформатів, п’ять різних стратегій

Ми підтримуємо формати, якими дійсно користуються люди: 

const AUDIO_FORMATS = [
  { value: "mp3", label: "MP3", extension: "mp3", mimeType: "audio/mpeg" },
  { value: "aac", label: "AAC", extension: "aac", mimeType: "audio/aac" },
  { value: "wav", label: "WAV", extension: "wav", mimeType: "audio/wav" },
  { value: "ogg", label: "OGG", extension: "ogg", mimeType: "audio/ogg" },
  { value: "flac", label: "FLAC", extension: "flac", mimeType: "audio/flac" },
];

Кожному формату відповідають власні налаштування кодера, бо універсального рішення для аудіо не існує.

MP3: Універсальний формат

case "mp3":
  ffmpegArgs = [
    "-i", inputName,
    "-vn",
    "-c:a", "libmp3lame",
    "-q:a", "2",
    "-y",
    outputName
  ];
  break;
  • libmp3lame: Стандартний кодувальник MP3. Працює скрізь.
  • -q:a 2: Режим змінного бітрейту, висока якість (0 — найкраща, 9 — найгірша). Рівень 2 знаходить хороший баланс — приблизно 190–250 кбіт/с, що є прозорим для більшості контенту.
  • -vn: Вимикає відео. Це ключовий прапорець, який каже FFmpeg витягувати лише аудіопотік.

AAC: Король ефективності

case "aac":
  ffmpegArgs = [
    "-i", inputName,
    "-vn",
    "-c:a", "aac",
    "-b:a", "192k",
    "-y",
    outputName
  ];
  break;

AAC на 192 кбіт/с зазвичай звучить краще, ніж MP3 на тій же швидкості, це формат, який використовують Apple Music, YouTube та більшість стримінгових сервісів. Якщо хочеться маленьких файлів без помітної втрати якості, AAC — відповідь.

WAV: Вибір редактора

case "wav":
  ffmpegArgs = [
    "-i", inputName,
    "-vn",
    "-c:a", "pcm_s16le",
    "-ar", "44100",
    "-ac", "2",
    "-y",
    outputName
  ];
  break;
  • pcm_s16le: Непоміркований 16-бітний PCM аудіо. Жодних втрат якості.
  • -ar 44100: Стандартна частота дискретизації CD.
  • -ac 2: Стерарний вихід.

WAV-файли величезні, але ідеальні для імпорту у цифрові аудіоредактори (DAWs), відеоредактори або будь-яких сценаріїв, де потрібна бездоганна якість аудіо.

OGG: Відкритий формат

case "ogg":
  ffmpegArgs = [
    "-i", inputName,
    "-vn",
    "-c:a", "libvorbis",
    "-q:a", "4",
    "-y",
    outputName
  ];
  break;

OGG Vorbis є патентні-free та пропонує відмінне стиснення. Рівень якості 4 приблизно відповідає MP3 128–160 кбіт/с, але зазвичай звучить краще.

FLAC: Формат архівіста

case "flac":
  ffmpegArgs = [
    "-i", inputName,
    "-vn",
    "-c:a", "flac",
    "-y",
    outputName
  ];
  break;

FLAC — безвтратне стиснення: ви отримуєте ті самі аудіодані, що й у WAV, але файл зазвичай на 40–60% менший. Ідеально для архівації музики або аудіо, яке може знадобитися пізніше перекодувати.

Виявлення беззвучних відео

Не кожне відео має аудіо. Ми обробляємо це двома способами:

По-перше, ми намагаємося виявити аудіодоріжки під час завантаження метаданих відео за допомогою браузерних API: 

video.onloadedmetadata = () => {
  const hasAudio = (video as any).mozHasAudio !== false || 
                   Boolean((video as any).webkitAudioDecodedByteCount) ||
                   Boolean((video as any).audioTracks?.length);

  setSelectedFile({
    id: `${file.name}-${Date.now()`,
    file,
    previewUrl: videoUrl,
    videoWidth: video.videoWidth,
    videoHeight: video.videoHeight,
    duration: video.duration,
    hasAudio: undefined,
  });
};

Проте браузерна детекція ненадійна між різними форматами. Тому ми також ловимо помилки FFmpeg та перекладаємо їх у дружнє повідомлення: 

try  {
  await ffmpeg.exec(ffmpegArgs);
} catch (execErr: any) {
  const errorMessage = String(execErr);

  if (errorMessage.includes("Stream map") || 
      errorMessage.includes("does not contain") ||
      errorMessage.includes("No audio") ||
      errorMessage.includes("Output file #0 does not contain any stream") ) {
    throw new Error("NO_AUDIO_STREAM");
  }

  throw new Error(`FFmpeg execution failed: ${errorMessage}`);
}

І після прочитання виводу ми проводимо перевірку розміру файлу на логічність: 

if (uint8Data.length < 100) {
  throw new Error("NO_AUDIO_STREAM");
}

Справжній аудіофайл ніколи не має бути меншим за 100 байт. Якщо так — з чимось не так, зазвичай через те, що джерельне відео не містило аудіо для витягнення.

Коли ми виявляємо беззвучне відео, ми показуємо чіткий стан помилки замість загального повідомлення про невдачу: 

if (err.message === "NO_AUDIO_STREAM") {
  setError("This video file does not contain an audio stream");
  setSelectedFile(prev => prev ? { 
    ...prev, 
    error: "NO_AUDIO_STREAM", 
    hasAudio: false,
    processing: false 
  } : null);
}

Інтерфейс користувача потім показує дружній екран “No Audio Detected” з кнопкою спробувати інше відео.

Попередній перегляд перед завантаженням

Після витягнення ми вставляємо вбудований аудіоплеєр HTML5, щоб користувач міг попередньо переглянути результат перед завантаженням: 

{selectedFile.audioUrl && (
  <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
    <div className="flex items-center gap-3 mb-4">
      <Music className="w-8 h-8 text-green-600" />
      <div>
        <h3 className="font-medium text-green-800">Audio Extraction Complete!</h3>
        <p className="text-sm text-green-600">{selectedFile.audioFileName}</p>
      </div>
    </div>
    <audio src={selectedFile.audioUrl} controls className="w-full" />
  </div>
)}

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

Завантаження FFmpeg за вимогою

Як і з усіма нашими інструментами, FFmpeg завантажується ліниво: 

// utils/ffmpegLoader.ts
import {fetchFile, toBlobURL } from "@ffmpeg/util";

let ffmpeg: any= null;
let fetchFileFn: any= null;

export async function loadFFmpeg() {
  if (ffmpeg) return { ffmpeg, fetchFile: fetchFileFn };

  const { FFmpeg } = await import("@ffmpeg/ffmpeg");

  ffmpeg = new FFmpeg();
  fetchFileFn = fetchFile;

  const baseURL = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/umd";

  await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
  }, {
    corePath: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
  });

  return { ffmpeg, fetchFile };
}

Динамічне імпортування тримає первісний бандл маленьким. URL-адреси Blob дозволяють уникнути проблем CORS. Кешування екземпляра означає, що наступні витягнення відбуваються швидше.

Прогрес і прибирання

Ми відстежуємо прогрес FFmpeg: 

ffmpeg.on("progress", ({ progress }: { progress: number }) => {
  setSelectedFile(prev => prev ? { ...prev, progress: Math.round(progress * 100) } : null);
});

І узагальненням очищення: 

const reset = useCallback(() => {
  if (selectedFile) {
    URL.revokeObjectURL(selectedFile.previewUrl);
    if (selectedFile.audioUrl) URL.revokeObjectURL(selectedFile.audioUrl);
  }
  setSelectedFile(null);
  setError(null);
  setAudioFormat("mp3");
}, [selectedFile]);

Плюс очищення файлової системи після кожного витягнення: 

await ffmpeg.deleteFile(inputName);
await ffmpeg.deleteFile(outputName);

Що ми навчились

Створення цього інструменту висвітлило кілька цікавих крайових випадків:

  • Не все відео має аудіо: ми припускали, що кожне відео має хоча б одну аудіодоріжку. Ні. Записи з екрану без системного аудіо, певні формати камер та деякі завантажені кліпи можуть бути тільки відео. Важливо зловити випадок NO_AUDIO_STREAM і обробити його коректно.
  • Детекція аудіо у браузері ненадійна: mozHasAudio, webkitAudioDecodedByteCount та audioTracks існують у різних браузерах з різною поведінкою. Ми використовуємо всі три як підказки, але реальна перевірка — чи може FFmpeg насправді витягти щось.
  • Якість MP3-залежить від рівня: -q:a 0 через -q:a 9 — це шкала LAME VBR, але інвертована — 0 найкращий, 9 — найд worse. Ми обрали рівень 2 як значення за замовчуванням, бо він приблизно відповідає 256 kbps VBR, що прозоро для практично всього контенту.
  • Файли WAV виявляються надзвичайно великими: 3-хвилинний WAV, витягнутий з відео, може легко досягати 30 МБ. Користувачі іноді очікують, що аудіофайл буде малим. Ми додали опис форматів, щоб очікування були реалістичними — WAV безпоровне стиснення, FLAC — без втрат стиснення, MP3/OGG/AAC — з компресією з втратою.
  • -vn — ваш друг: Один цей прапорець повністю вимикає обробку відео. Без нього FFmpeg може намагатися повторно кодувати відеопотік, навіть якщо вам потрібне лише аудіо, що робить витяг повільнішим у десять разів.

Спробуйте самі

Є відео з саундтреком, який ви хочете зберегти? Або потрібне озвучення як окремий файл? Ви можете витягти його прямо зараз.

👉 Витягти аудіо з відео

Завантажте ваше відео, оберіть формат, попередньо перегляньте результат і завантажте його. MP3, AAC, WAV, OGG або FLAC — ваш вибір. Ваше відео ніколи не покине ваш браузер.

HI-FI News

via DEV Community https://dev.to

24 квітня 2026 року о 06:41 ранку

April 24, 2026 at 06:41AM

Коментарі

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *