---
title: "Блок «Аудио» — встроенный аудиоплеер"
description: "Загрузка или ссылка на аудио и встроенный проигрыватель, включая ссылки с популярных хостингов аудиозаписей."
source: https://blokeditor.com/ru/docs/audio/
lastmod: 2026-09-07
---

Фреймворк JavaScript

Блочные инструменты Аудио

# Аудио: встроенный проигрыватель

Блок аудио в стиле музыкального плеера. Отрисовывает загруженный или указанный ссылкой аудиофайл с собственной панелью управления (воспроизведение и пауза, перемотка по форме волны, громкость, скорость воспроизведения, повтор), необязательной обложкой, метаданными названия и исполнителя и необязательной подписью, которая включается из меню настроек блока (`captionVisible`). Пики формы волны и длительность декодируются один раз и кэшируются в сохраняемых данных, поэтому при перезагрузке плеер отрисовывается мгновенно. Аудио отправляется через загрузчик, который предоставляет потребитель; если его нет, инструмент откатывается на локальный blob URL (uploadByFile) или на вставленный URL (uploadByUrl). Ссылки для общего доступа из Dropbox, GitHub, GitLab, Hugging Face, Google Cloud Storage и Internet Archive автоматически переписываются в прямые ссылки на содержимое; для ссылок Google Drive и OneDrive дополнительно нужен бэкенд `uploadByUrl`, потому что эти хостинги блокируют анонимные запросы из браузера. Необязательный список разрешённых MIME-типов и максимальный размер ограничивают, что можно принять.

### Импорт

TypeScript

```
import { Audio } from '@bloklabs/core/tools';
```

### Конфигурация

| Опция | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `uploader` | `AudioUploader` | `undefined` | Загрузчик от потребителя с необязательными методами `uploadByFile(file, ctx)` (возвращает `{ url, fileName? }`) и `uploadByUrl(url, ctx)` (возвращает `{ url }`). Колбэк `ctx.onProgress(percent)` сообщает о прогрессе загрузки. Если загрузчик не задан, аудио откатывается на blob URL или на вставленный URL. |
| `types` | `string[]` | `['audio/*']` | Список разрешённых MIME-типов. Записи могут быть точными (`audio/mpeg`) или групповыми (`audio/*`). По умолчанию разрешён любой тип аудио. |
| `maxSize` | `MaxSizeConfig` | `30 MiB` | Максимальный размер загрузки. Число ограничивает все типы (в байтах); объект задаёт ограничение для каждого MIME-типа, где `'*'` — запасное значение. |
| `sources` | `'upload' | 'url' | 'both'` | `'both'` | Ограничивает способы добавления медиа — только загрузка файла, только URL или оба варианта. |
| `captionPlaceholder` | `string` | `"Write a caption…"` | Плейсхолдер, который показывается в поле подписи. |

### Формат данных

TypeScript

```
interface AudioData {
  url: string;             // Audio source URL — http(s) or blob:
  caption?: string;        // Plain-text caption
  captionVisible?: boolean; // Caption is opt-in — switch it on in block settings
  title?: string;          // Track title (from file metadata or edited)
  artist?: string;         // Track artist
  coverUrl?: string;       // Cover art image URL
  loop?: boolean;          // Loop playback
  width?: number;          // Pass-through width value; not currently surfaced in the audio UI
  alignment?: 'left' | 'center' | 'right';
  fileName?: string;       // Original filename, when known
  mimeType?: string;       // MIME type
  duration?: number;       // Decoded duration in seconds (cached)
  peaks?: number[];        // Cached waveform peaks for the scrubber
}
```

JSON

```
{
  "id": "aud001",
  "type": "audio",
  "data": {
    "url": "https://example.com/media/track.mp3",
    "fileName": "track.mp3",
    "mimeType": "audio/mpeg",
    "title": "My Song",
    "artist": "The Artist",
    "alignment": "center"
  }
}
```

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

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Audio } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    audio: {
      class: Audio,
      config: {
        uploader: {
          async uploadByFile(file) {
            const url = await myUpload(file);
            return { url, fileName: file.name };
          },
        },
      },
    },
  },
});
```