{"id":25480107,"url":"https://github.com/literteams/virbix","last_synced_at":"2026-02-27T15:31:53.388Z","repository":{"id":277883983,"uuid":"933814834","full_name":"LiterTeams/Virbix","owner":"LiterTeams","description":"библиотека для воспроизведения аудио в React и NextJS","archived":false,"fork":false,"pushed_at":"2025-02-19T02:14:09.000Z","size":34701,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T07:18:08.399Z","etag":null,"topics":["audio","audio-player","music","music-player","nextjs","nextjs-player","react","react-player","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiterTeams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-16T18:44:55.000Z","updated_at":"2025-02-19T02:07:06.000Z","dependencies_parsed_at":"2025-02-16T19:43:34.307Z","dependency_job_id":null,"html_url":"https://github.com/LiterTeams/Virbix","commit_stats":null,"previous_names":["literteams/virbix"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiterTeams%2FVirbix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiterTeams%2FVirbix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiterTeams%2FVirbix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiterTeams%2FVirbix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiterTeams","download_url":"https://codeload.github.com/LiterTeams/Virbix/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248068266,"owners_count":21042464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-player","music","music-player","nextjs","nextjs-player","react","react-player","typescript"],"created_at":"2025-02-18T15:27:27.126Z","updated_at":"2026-02-27T15:31:53.313Z","avatar_url":"https://github.com/LiterTeams.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Virbix\n\n### Преамбула\n\nМой аудио плеер не идеален и мне ещё долго предстоит его улучшать. \u003c/br\u003e\nНа данный момент, его невозможно стилизовать без костылей, но в будущий версиях я это исправлю и добавлю встроенные темы. \u003c/br\u003e\nПод темати я подразумеваю дизайн плеера, например, тема Spotify будет менять дизайн плеера приближённый под дизайн Spotify плеера. \u003c/br\u003e\nКонечно, готовые темы могут не всем понадобится, так что попробую также реализовать и создание кастомной темы, но это уже потом. \u003c/br\u003e\n\n---\n\n### Как использовать\n\n1. Установка: yarn add virbix / npm install virbix\n2. Импортируйте из virbix MusicProvider и добавьте его в главный Layout или в какой-либо ещё Layout;\n3. Импортируйте хук useMusic из virbix;\n4. Деструктуризирейте хук useMusic, достав из него player и playback;\n5. в playback.handleTogglePlay необходимо передать url (источник) аудиофайла и при желании можно добавить ещё доп информацию о аудиофайле.\n6. player.source нужен будет для отслеживания конкретного трека, чтобы динамически менять иконки воспроизведения и паузы компоненту (если вы конечно их добавите и захотите менять)\n\n\n---\n\n### Особенность\n\n| Название                              | Virbix           |\n|---------------------------------------|------------------|\n| **SSR**                               | -                |\n| **Эффекты**                           | -                |\n| **Поддержка мобильных устройств**     | -                |\n| **Отказ от TailwindCSS**              | -                |\n| **Кастомизация UI**                   | -                |\n| **Кастомизация горячих клавиш**       | -                |\n| **Смена UI тем**                      | -                |\n| **Подзагрузка новых треков**          | -                |\n| **Автоматическое добавление трека**   | 1.1.0            |\n| **Перемешка треков**                  | 1.1.0            |\n| **Очередь треков**                    | 1.1.0            |\n| **Горячие клавиши (Windows / Mac)**   | 1.1.0            |\n| **Поддержка ПК**                      | 1.0.0            |\n| **Многоразовое зацикливание**         | 1.0.0            |\n| **Готовый UI**                        | 1.0.0            |\n\n---\n\n### Управление клавишами\n| Действие                            | Windows           | macOS            |\n|-------------------------------------|-------------------|------------------|\n| **Воспроизвести/пауза**             | `Space`           | `Space`          |\n| **Следующий трек**                  | `Ctrl + →`        | `Command + →`    |\n| **Предыдущий трек**                 | `Ctrl + ←`        | `Command + ←`    |\n| **Промотка вперёд (Seek +15s)**     | `Alt + →`         | `Option + →`     |\n| **Промотка назад (Seek -15s)**      | `Alt + ←`         | `Option + ←`     |\n| **Повтор трека/альбома**            | `Ctrl + R`        | `Command + R`    |\n| **Перемешивание (Shuffle)**         | `Ctrl + S`        | `Command + S`    |\n| **Увеличить громкость**             | `Ctrl + ↑`        | `Command + ↑`    |\n| **Уменьшить громкость**             | `Ctrl + ↓`        | `Command + ↓`    |\n| **Уменьшить/увеличение громкость**  | `Mouse Wheel`     | `Mouse Wheel`    |\n| **Сокрытие/появление плеера**       | `Ctrl + H`        | `Command + H`    |\n| **Вкл/выкл эффекты**                | `Ctrl + E`        | `Command + E`    |\n| **Закрытие плеера**                 | `Ctrl + C`        | `Command + C`    |\n\n---\n\n### Свойства `useMusic`\n\n#### 1. `audioRef`\nСсылка на HTML-элемент `\u003caudio\u003e`.\n\n---\n\n#### 2. `track`\nОбъект с информацией о текущем треке (берётся из player):\n- **`source`** – источник аудио.\n- **`info`** – дополнительная информация о треке.\n\n---\n\n#### 3. `info`\nОбъект с дополнительной информацией о текущем треке (берётся из переменной track в player):\n- **`name`** – название трека.\n- **`description`** – описание.\n- **`image`** – изображение обложки.\n- **`author`** – информация об авторе (id, name, url).\n\n---\n\n#### 3. `player`\nСостояние и управление плеером:\n- **`isPlaying`** – флаг, указывающий, воспроизводится ли аудио.\n- **`track`** – содержит информацию о треке.\n- **`trackList`** – очередь треков.\n- **`error`** – содержит ошибку (вроде как, забыл проверить).\n- **`isLoading`** – загрузился ли трек.\n- **`isLooped`** – включен ли режим зацикленного воспроизведения.\n- **`isEnded`** – закончился ли трек.\n- **`isError`** – есть ли ошибка при загрузке/воспроизведении аудио.\n- **`isMuted`** – выключен ли звук.\n- **`volume`** – текущий уровень громкости.\n- **`progress`** – прогресс воспроизведения музыки.\n- **`currentTime`** – текущая длина воспроизводимой музыки.\n- **`totalTime`** – общая длина музыки.\n- **`setPlayerState()`** – общая функция для обновления состояний (не всех).\n- **`updateTrackInfo()`** – обновление информации о треке.\n- **`handleError()`** – перехват ошибок.\n- **`setTrackList(newTrack: TrackProps)`** – добавление нового трека/треков в очередь.\n\n---\n\n#### 4. `playback`\nФункции управления воспроизведением:\n- **`handleTogglePlay(url: string, trackInfo: TrackInfoProps)`** – переключает воспроизведение и обновляет данные о треке, если воспроизводится новый трек.\n- **`handleLoadedMetadata()`** – вызывается при загрузке метаданных трека.\n- **`handleTimeUpdate()`** – вызывается при обновлении текущего времени.\n- **`handleEnded()`** – вызывается при завершении трека.\n- **`handleRepeat()`** – воспроизводит аудио с начала.\n- **`handleForwardSkip()`** – перемотка трека на 15 сек вперёд.\n- **`handleBackwardSkip()`** – перемотка трека на 15 сек назад.\n- **`handleNextTrack()`** – следующий трек.\n- **`handlePrevTrack()`** – предыдущий трек.\n- **`toggleMute()`** – включает/выключает звук.\n- **`toggleLoop()`** – включает/выключает зацикливание.\n- **`handleVolumeChange()`** – обновление громкости трека.\n- **`handleToggleClose()`** – закрытие плеера.\n- **`onSeek(time: number)`** – перематывает трек на указанное время.\n\n---\n\n#### 5. `shortcuts`\nУправление горячими клавишами:\n- **`volumeControlRef`** – ссылка на HTML-элемент.\n- **`handleTimeSkip()`** – управляет перемоткой трека.\n- **`handleTrackSkip()`** – управляет промоткой следующего и предыдущего трека.\n- **`handleVolume()`** – управляет увеличение/уменьшение звука (only keyboards).\n- **`handleScrollVolume()`** – управляет увеличение/уменьшение звука (only mouse).\n- **`handlePlaybackControls()`** – управляет второстипенными функциями управления (пауза, сокрытие плеера, вкл/выкл эффекты и т.п).\n\nPS. из shortcuts можно достать только volumeControlRef (нужен для работы handleScrollVolume), остальное вам не нужно трогать.\n\n---\n\n#### 6. `vfx`\nУправление визуальными эффектами:\n- **`ambientMode`** – режим визуальных эффектов.\n- **`toggleAmbientMode()`** – переключает `ambientMode`.\n\n---\n\n#### 7. `ui`\nУправление отображением плеера:\n- **`isCollapse`** – скрыт ли плеер.\n- **`isClose`** – закрыт ли плеер.\n- **`toggleCollapse()`** – Переключает скрытие/отображение плеера.\n- **`toggleClose()`** – закрывает плеер (не используйте напрямую! он нужен для handleToggleClose в playback).\n\n---\n\n#### 8. `timeline`\nУправление дорожкой:\n- **`progress`** – показывает прогресс проигрываемого трека.\n- **`skipTime(direction: \"forward\" | \"backward\")`** – проматывает трек на n секунд (Не используйте напрямую! Он нужен в handleForwardSkip и handleBackwardSkip в playback).\n- **`startAnimation()`** – запускает анимацию движения полосы трека.\n- **`stopAnimation()`** – останавливает анимацию движения полосы трека.\n\n---\n\n### Пример использования\n\n1. Layout / Providers\n\n```ts\n\"use client\";\nimport { ReactNode } from \"react\";\nimport { TanStackProvider, MobxProvider, ToastProvider, ContextMenuProvider } from \"./\";\nimport { MusicProvider } from \"virbix\";\n\nexport const Providers = ({children}:{children:ReactNode}) =\u003e {\n    return(\n        \u003cTanStackProvider\u003e\n            \u003cMobxProvider\u003e\n                \u003cToastProvider\u003e\n                    \u003cContextMenuProvider\u003e\n                        \u003cMusicProvider\u003e\n                            {children}\n                        \u003c/MusicProvider\u003e\n                    \u003c/ContextMenuProvider\u003e\n                \u003c/ToastProvider\u003e\n            \u003c/MobxProvider\u003e\n        \u003c/TanStackProvider\u003e\n    )\n}\n```\n\n2. Некий компонент аудио\n```ts\nimport { useMusic } from \"virbix\";\n\nconst CardStorageWrapper: FC\u003cCardStorageWrapperProps\u003e = ({...props}) =\u003e {\n    const { id, name, url, extension, type, size, created_at, children } = props;\n    const description = `${extension} | ${formatFileSize(size, \"MB\")} | ${timestampFormat(created_at, \"Year.Month.Day\", false)}`;\n    const { player, playback } = useMusic();\n    const image = \"https://clck.ru/3GTNmC\";\n\n    const trackInfo = {name, description, image}\n\n    return(\n        \u003cdiv className=\"card-storage-wrapper\"\u003e\n            {type === \"image\"\n                ? \u003cImage ...\u003e\n                : \u003cButton ...\u003e{icons[type]}\u003c/Button\u003e\n            }\n            \u003cdiv className=\"flex flex-col gap-1\"\u003e\n                \u003ch2 className=\"text-sm font-semibold\"\u003e{formatMessage(name,18)}\u003c/h2\u003e\n                \u003cp className=\"text-xs uppercase font-semibold text-neutral-400\"\u003e{description}\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"flex items-center gap-1 ml-auto\"\u003e\n                {children}\n                {(type === \"audio\") \u0026\u0026 (\n                    \u003cButton className=\"size-8 flex flex-center p-1.5\" onClick={() =\u003e playback.handleTogglePlay(url, trackInfo)}\u003e\n                        {player.track ? (player.track.source == url \u0026\u0026 player.isPlaying ? icons[\"stop\"] : icons[\"play\"]) : icons[\"play\"]}\n                    \u003c/Button\u003e\n                )}\n                \u003cButton className=\"size-8 flex flex-center p-1.5\"\u003e\n                    {icons[\"cross\"]}\n                \u003c/Button\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default CardStorageWrapper;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliterteams%2Fvirbix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliterteams%2Fvirbix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliterteams%2Fvirbix/lists"}