Фреймворк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-типа, где `'*'` служит запасным значением.
`onUploadError`	`UploadErrorHandler`	`undefined`	Вызывается, когда загрузка не удалась. Получает `{ code, tool, message, file?, url?, size?, maxSize?, cause }`. Ничего не вернули: блок показывает своё сообщение. Вернули строку: блок показывает её. Вернули `false`: блок возвращается в пустое состояние без ошибки, и вы можете показать свой тост. Если ваш uploader отклонил промис, придёт код `UPLOAD_FAILED`. Исходная ошибка лежит в `cause`.
`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 };
          },
        },
      },
    },
  },
});