Аудио и видео файлы

Parcel рассматривает мультимедийные ресурсы как полноценные модули приложения. Аудио и видео файлы подключаются напрямую через import, обрабатываются сборщиком и автоматически оптимизируются в процессе сборки. Такой подход исключает необходимость ручной настройки загрузчиков в большинстве сценариев и делает интеграцию медиа предсказуемой и унифицированной.

Подключение медиафайлов как модулей

Parcel поддерживает импорт аудио- и видеофайлов из JavaScript, TypeScript, CSS и HTML. При импорте файл рассматривается как зависимость, которая проходит через систему трансформаций и получает итоговый публичный URL.

import sound from './assets/click.mp3';
import trailer from './assets/intro.mp4';

После сборки переменные sound и trailer содержат строки с конечными URL:

/dist/click.8f3a1c.mp3
/dist/intro.91bd77.mp4

Parcel автоматически:

  • копирует файлы в директорию сборки;
  • добавляет хэш в имя файла для кеширования;
  • обновляет ссылки в коде;
  • учитывает файл как часть графа зависимостей.

Использование аудиофайлов в приложении

Аудио чаще всего используется через стандартный Web Audio API или HTMLAudioElement.

HTMLAudioElement

import clickSound from './assets/click.mp3';

const audio = new Audio(clickSound);

function playClick() {
  audio.currentTime = 0;
  audio.play();
}

Parcel не требует дополнительной настройки для обработки .mp3, .wav, .ogg и других распространённых форматов, если браузер их поддерживает.

Работа с видеофайлами

Видео подключаются аналогично аудио, поскольку Parcel трактует их как статические ресурсы.

import introVideo from './assets/intro.mp4';

const video = document.createElement('video');

video.src = introVideo;
video.controls = true;
video.autoplay = false;

document.body.appendChild(video);

При таком подходе Parcel:

  • оптимизирует путь к файлу;
  • учитывает его в системе кеширования;
  • корректно обрабатывает относительные импорты.

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

Parcel позволяет подключать медиафайлы напрямую в HTML через относительные пути, которые также проходят обработку сборщиком.

<audio src="./assets/click.mp3" controls></audio>
<video src="./assets/intro.mp4" controls></video>

При сборке Parcel:

  • переписывает пути на хэшированные версии;
  • перемещает файлы в output директорию;
  • сохраняет структуру ссылок внутри HTML.

Поддерживаемые форматы

Parcel не ограничивает список форматов на уровне конфигурации, а полагается на возможности браузера и систему трансформаций.

Аудио

  • MP3
  • WAV
  • OGG
  • AAC
  • FLAC (частично, зависит от браузера)

Видео

  • MP4 (H.264/AAC — наиболее универсальный вариант)
  • WebM
  • OGV

Поддержка конкретного кодека определяется средой выполнения, а не сборщиком.

Оптимизация медиафайлов

Parcel не перекодирует аудио и видео по умолчанию, но обеспечивает инфраструктуру для интеграции с оптимизаторами через плагины.

Основные уровни оптимизации:

1. Хэширование файлов

Каждый медиафайл получает уникальный хэш:

video.3f2a91.mp4
sound.91c8de.mp3

Это обеспечивает:

  • долгосрочное кеширование;
  • автоматическое обновление при изменениях;
  • отсутствие конфликтов версий.

2. Code splitting медиа

При динамическом импорте Parcel выносит медиа в отдельные чанки.

const loadVideo = async () => {
  const videoSrc = await import('./assets/intro.mp4');
  return videoSrc.default;
};

Такой подход позволяет:

  • загружать видео только при необходимости;
  • уменьшать размер начального бандла;
  • оптимизировать время первого рендера.

3. Lazy loading

Видео и аудио часто используются в ленивых компонентах.

function createPlayer() {
  import('./assets/background.mp3').then(({ default: music }) => {
    const audio = new Audio(music);
    audio.loop = true;
    audio.play();
  });
}

Parcel автоматически разбивает такие ресурсы на отдельные чанки.

Интеграция с HTML5 Video API

Parcel не вмешивается в работу браузерных API, поэтому управление видео осуществляется стандартными средствами.

import movie from './assets/movie.mp4';

const video = document.querySelector('video');

video.src = movie;
video.muted = true;
video.playsInline = true;

video.addEventListener('loadeddata', () => {
  video.play();
});

Особенности:

  • корректная работа с автозагрузкой;
  • поддержка потокового воспроизведения;
  • совместимость с preload атрибутом.

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

Аудио напрямую в CSS не применяется, однако видео может использоваться как фон.

.hero {
  background: url('./assets/preview.mp4');
}

Parcel преобразует ссылку в корректный URL и учитывает файл в сборке.

Для фоновых видео чаще используется HTML-элемент <video>, но Parcel одинаково обрабатывает оба варианта.

Обработка ошибок загрузки

При работе с медиафайлами важно учитывать возможные ошибки загрузки.

import track from './assets/music.mp3';

const audio = new Audio(track);

audio.addEventListener('error', () => {
  console.error('Ошибка загрузки аудиофайла');
});

Parcel гарантирует корректность путей, но не управляет доступностью ресурсов на сервере или поддержкой кодеков.

Работа с большими файлами

Видео высокого разрешения могут значительно увеличивать размер сборки. Parcel предоставляет механизмы контроля:

  • разделение на чанки через динамический импорт;
  • использование CDN через publicUrl;
  • исключение файлов из бандла через static assets directory.

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

const video = 'https://cdn.example.com/video.mp4';

В этом случае Parcel не обрабатывает файл, оставляя его внешним ресурсом.

Импорт медиа в TypeScript проектах

Parcel автоматически понимает типы импортируемых файлов, однако в строгих TypeScript конфигурациях может потребоваться декларация модулей.

declare module '*.mp3';
declare module '*.mp4';

После этого импорт становится типобезопасным:

import sound from './assets/sound.mp3';

Использование с React и другими фреймворками

Parcel не требует дополнительных загрузчиков для медиа в React-компонентах.

import videoSrc from './assets/demo.mp4';

export default function Player() {
  return (
    <video src={videoSrc} controls />
  );
}

Механика остаётся идентичной: файл превращается в URL и передаётся компоненту.

Поведение в режиме разработки

В dev-сервере Parcel:

  • не выполняет агрессивную оптимизацию;
  • обслуживает файлы напрямую;
  • сохраняет исходные имена для удобства отладки;
  • мгновенно обновляет ссылки при изменениях.

Аудио и видео файлы подгружаются без дополнительной обработки, что ускоряет цикл разработки.

Кеширование и обновление ресурсов

Parcel использует контентно-адресуемое кеширование. Изменение любого байта в медиафайле приводит к новому хэшу.

Это означает:

  • старые версии файлов остаются в кеше;
  • новые версии подхватываются автоматически;
  • нет необходимости вручную управлять версиями ресурсов.
audio.1a2b3c.mp3 → audio.9d8e7f.mp3

Потоковая передача и частичная загрузка

Parcel не реализует потоковую передачу самостоятельно, но корректно поддерживает работу браузерных механизмов:

  • preload="metadata" для видео;
  • preload="auto" для аудио;
  • HTTP range requests.
<video src="./assets/film.mp4" preload="metadata" controls></video>

Организация структуры проекта с медиафайлами

Типичная структура:

src/
  assets/
    audio/
      click.mp3
      theme.ogg
    video/
      intro.mp4
      trailer.webm

Parcel не требует отдельной конфигурации для такой структуры и автоматически учитывает все зависимости при импорте.

Взаимодействие с другими типами ассетов

Аудио и видео часто используются совместно с изображениями и шрифтами. Parcel строит единый граф зависимостей, где каждый ресурс имеет равный статус.

import sound from './audio/click.mp3';
import poster from './img/poster.png';
import video from './video/intro.mp4';

Все ресурсы проходят одинаковый pipeline обработки: обнаружение → трансформация → хэширование → выдача URL.

Оглавление