Фреймворк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 };
          },
        },
      },
    },
  },
});