Ostbay Player

Аудиоплеер Ostbay. Основан на библиотеке react-modern-audio-player.

Важно: Библиотека не совместима с React 19. Используйте React версии 16.8.0 - 18.3.1.

Связанные ссылки

• Демо
• Ostbay Platform
• GitHub Repository

Особенности

• Полнофункциональный аудиоплеер с плейлистом
• Кастомные иконки Ostbay
• Адаптивный дизайн
• Две темы: светлая и темная

Установка

npm install ostbay-player

Требования

• React >= 16.8.0 <= 18.3.1
• React DOM >= 16.8.0 <= 18.3.1

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

Базовое использование

import React, {useRef} from 'react';
import {OstbayPlayer} from 'ostbay-player';

const App = () => {
  const audioRef = useRef<HTMLAudioElement>(null); // ref на контейнер
  const ostbayPlayerRef = useRef<HTMLDivElement>(null); // ref на проигрыватель

  const playList = [
    {
      name: 'Название аудиофайла',
      src: '/path/to/audio.mp3', // может быть ссылкой
      writer: 'Исполнитель'
    },
    // ... другие аудиофайлы
  ];

  return (
    <OstbayPlayer
      audioRef={audioRef}
      playList={playList}
      ref={ostbayPlayerRef}
    />
  );
};

Расширенное использование

import React, {useRef} from 'react';
import {OstbayPlayer} from 'ostbay-player';

const App = () => {
  const audioRef = useRef<HTMLAudioElement>(null);
  const ostbayPlayerRef = useRef<HTMLDivElement>(null);

  const playList = [
    {
      id: 1,
      name: 'Название аудиофайла 1',
      src: '/audio/track1.mp3',
      writer: 'Исполнитель 1'
    },
    {
      id: 2,
      name: 'Название аудиофайла 2',
      src: '/audio/track2.mp3',
      writer: 'Исполнитель 2'
    }
  ];

  return (
    <OstbayPlayer
      audioRef={audioRef}
      className="custom-class"
      playList={playList}
      ref={ostbayPlayerRef}
      style={{
        width: '100%',
        maxWidth: '600px'
      }}
      theme="light"
    />
  );
};

API

OstbayPlayer Props

| Prop | Тип | Обязательный | Описание | |-------------|-----|-------------|-------------------------------------------| | playList | IPlayListItem[] | ✅ | Массив аудиофайлов для воспроизведения | | audioRef | RefObject<HTMLAudioElement> | ❌ | Ссылка на HTML audio элемент | | className | string | ❌ | CSS класс для контейнера | | ref | RefObject<HTMLDivElement> | ❌ | Ссылка на HTML div элемент для контейнера | | style | CSSProperties | ❌ | Инлайн стили для контейнера | | theme | 'dark' \| 'light' | ❌ | Тема плеера. По умолчанию 'dark' |

IPlayListItem

interface IPlayListItem {
  id?: number          // Уникальный идентификатор (опционально)
  name: string,        // Название трека
  src: string,         // Путь к аудиофайлу
  writer: string,      // Исполнитель
}

Лицензия

MIT License

Поддержка

Если у вас есть вопросы или предложения, создайте issue в репозитории.