Як я побудував безкоштовну платформу для звукового контенту творців із PHP, MariaDB, JavaScript та Node.js
https://ift.tt/0pDeV5N
Більшість музичних сайтів або є потоковими платформами, або простими лендінг-пейджами, або маркетплейсами сток-аудіо.
Я хотів чогось іншого.
Я хотів платформу, де музика, звукові ефекти, вигадані артисти, альбоми, метадані, завантаження, прев’ю, ліцензування та інструменти для творців могли б існувати в рамках єдиної екосистеми.
Цей проект став WildVerse.
https://wildverse.codbiohub.com
Оригінальна ідея
Початкова концепція була досить простою:
Створити місце, де творці могли б переглядати та завантажувати аудіо для:
- відео на YouTube
- Shorts
- Подкасти
- Ігри
- Прямі трансляції
- Мобільні застосунки
- Контент у соціальних мережах
Але я не хотів папки із MP3-файлами.
Я хотів щось ближче до міні-Spotify, змішаного з бібліотекою активів творців.
Огляд архітектури
WildVerse зараз поєднує:
- PHP
- MariaDB
- JavaScript
- HTML5
- CSS
- Node.js мікросервіси
Платформа навмисно легка.
Ніяких важких фреймворків.
Ні React.
Ні Vue.
Ні нічого подібного до кошмарів з пайплайнами побудови.
Більшість сторінок рендеряться через PHP, тоді як JavaScript відповідає за інтерактивний шар.
Структура проекту
На високому рівні проект виглядає так:
wildverse/
├── admin/
├── api/
├── assets/
├── audio/
├── databases/
├── hero/
├── includes/
├── nav/
├── personas/
├── node_backend_private/
├── router.php
├── index.php
└── sitemap.xml
`
Архітектура організована навколо повторно використаних модулів, а не дублювання сторінок.
Двигун аудіо-бібліотеки
Серце платформи — Звукова бібліотека.
Користувачі можуть:
- шукати треки
- фільтрувати за настроєм
- фільтрувати за персоною
- фільтрувати за типом звуку
- сортувати за популярністю
- передивляти прев’ю треків
- додавати до черги
- завантажувати треки
Бібліотека наразі підтримує:
- повні треки
- лупи
- бас-дірки
- вступи
- атмосферу
- перехідні елементи
- звукові ефекти
Уся інформація керується метаданими, що зберігаються в MariaDB.
Фікційні музичні персони
Одне з незвичних дизайнерських рішень — організація музики навколо вигаданих артистів.
Замінюючи завантаження анонімних треків, кожен звук належить вигаданому світу.
Приклади:
- Millenova
- Rodrick Vale
- Vlralair
- ObscuraTones
- CambaAndino
- VibeCityWalks
Кожна персона має:
- Свою візуальну ідентичність
- Альбоми
- Музичні стилі
- Настрій
- Напрямок історії
Це дозволяє відкривати для користувача всесвіт, а не переглядати таблицю з даними.
Браузерний аудіоплеєр
Я хотів, щоб користувачі залишалися на сайті.
Тому побудував браузерний плеєр.
Особливості:
- керування чергою
- авто-наступне відтворення
- режими повтору
- відстеження прогресу
- підтримка мобільних пристроїв
- панелі контексту альбому
- візуальні індикатори відтворення
Плеєр behaves більше як легка стрімінгова платформа, ніж традиційний сайт завантаження.
API-слой
Публічне API обробляє:
- отримання треків
- лайки
- завантаження
- відтворення
- діапазони аудіо
- пошук альбомів
Приклади:
text
/api/tracks.php
/api/track-play.php
/api/track-like.php
/api/track-download.php
/api/album-tracks.php
Це дозволяє фронтенд-компонентам залишатися незалежними від логіки бази даних.
Node.js мікросервіси
Хоча більшість платформи побудована на PHP, деякі завдання делегуються Node.js.
Приклади:
- обрізання аудіо
- завантаження медіа
- інтеграція з GitHub
- моніторинг здоров’я системи
Цей гібридний підхід дозволяє мені тримати PHP за контентом, а Node.js — за медіа-обробкою.
Пошукова оптимізація
Одне з того, чого я рано навчився:
Створювати платформу — марно, якщо ніхто її не знайде.
WildVerse включає:
- структуровані дані
- метадані Schema.org
- теги Open Graph
- індексацію FAQ
- XML-карти сайтів
- зміст, дружній до пошуку
Сайт генерує великий обсяг пошуково придатної інформації про:
- музику
- аудіо-проduction
- інструменти творців
- звукові ефекти
- ліцензування
- ігровий аудіо
Це значно підвищує видимість у пошуку.
Хитрість, що зберігає місце на збереження: аудіо-спрайти, метадані MariaDB та обробка на вимогу
Одна з найнеординарніших частин WildVerse полягає в тому, що майже всі завантажувані аудіофайли фактично не існують на веб-сервері як окремі MP3-файли.
Для користувача платформа виглядає як звичайна звукова бібліотека:
- натиснути відтворення
- передивити звук
- завантажити MP3
- переглядати альбоми та персонажів
За лаштунками система працює зовсім по-іншому.
Замість завантаження сотень окремих MP3-файлів, WildVerse використовує великі аудіо-спрайтові файли. Один великий MP3 може містити багато звуків, зшитих разом. Кожен окремий звук зберігається в MariaDB як метадані:
- джерельний файл спрайта
- час початку
- час завершення
- тривалість
- назва треку
- персона
- альбом
- настрій
- використання
- інформація про завантаження
Коли користувач натискає відтворити, фронтенд не завантажує окремий MP3-файл. Він запитує метадані MariaDB, знаходить відповідний файл спрайту та часовий інтервал, після чого відтворює лише цю секцію з більшого звукового файлу.
Коли користувач натискає завантажити, система не вибирає готовий окремий MP3. Сервіс Node.js, розміщений на VPS, активує обробку FFmpeg за запитом. Лінійний бекенд Linux витягує потрібний часовий інтервал з великого MP3-спрайта та повертає його як завантажуваний аудіофайл.
Це означає, що WildVerse може поводитися як бібліотека багатьох окремих звуків, водночас зберігаючи в собі та керуючи меншими за розміром вихідними файлами.
Офлайн-робочий процес також важливий. Я можу підготувати великий MP3-спрайт та його локальні метадані спрайта, потім передати аудіо-спрайт та готові до використання в базі даних метадані на сервер без ручного завантаження кожного окремого MP3. Це робить впровадження контенту швидшим, чистішим та значно легшим для масштабування.
Цей підхід економить місце, зменшує різноманітність файлів і уникає створення тисяч маленьких файлів на акаунті хостингу.
Це має значення, оскільки обмеження на спільному хостингу стосуються не лише гігабайтів. Вони також включають кількість файлів, використання inode, резервні копії, синхронізацію та накладні витрати на управління сервером.
Для відвідувача кожен звук здається окремим активом.
Для системи кожен звук — це позначений часовий відрізок у більшому медіафайлі.
Найважчий аспект
Найважчою була не кодінг.
Це було проектування системи, гнучної enough, щоб підтримувати:
- Музику
- Звукові ефекти
- Альбоми
- Персони
- Завантаження
- Ліцензування
- Метадані
- Майбутні інструменти для творців
Без переписування всього кожні кілька місяців.
Архітектура неодноразово еволюціонувала, перш ніж дійти до нинішнього вигляду.
Що далі
Плани на майбутнє включають:
- Більше категорій аудіо
- Кращі робочі процеси для творців
- Розширені метадані
- Швидший пошук
- Додаткові API
- Нові персони
- Нове потокове покоління аудіо
Мета проста:
Побудувати незалежну екосистему творців, де музика, технології, оповідання та цифрові інструменти можуть розвиватися разом.
Проєкт
WildVerse:
https://wildverse.codbiohub.com
Розроблено одним розробником, однією базою даних, надмірною кількістю кави та неймовірною кількістю аудіофайлів.
Ця стаття має набагато вищу ймовірність зацікавити читачів DEV, оскільки розглядає її як історію архітектури програмного забезпечення та побудови продукту, а не як публікацію про музику.
HI-FI News
через DEV Community: javascript https://ift.tt/5Lq3lgp
23 червня 2026 року о 14:35 за місцевим часом
June 23, 2026 at 02:35PM
Залишити відповідь