Як я створив вебзастосунок інтернет-радіо

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Проблема, з якої все почалося

Я завжди любив слухати інтернет-радіо — від відкриття нових пісень та музичних колективів до прослуховування ток-шоу та новин наживо. Але щоразу, коли я користувався існуючими сайтами інтернет-радіо, стикався з одними й тими самими труднощами: незручна навігація і, що дивно, відсутність можливості зберігати улюблені станції.

Тоді я вирішив створити власне рішення — ось цей вебзастосунок.

Я зібрав адреси потоків інтернет-радіо, поекспериментував із різними способами їх обробки, і вже за місяць мав першу версію застосунку. Я розробив дві окремі версії — для браузерів на ПК та для мобільних пристроїв — тому що хотів, аби досвід користування був зручним усюди.

Для кого цей застосунок

Він створений для тих, хто любить радіо:

• для тих, хто хоче відкривати нову музику
• для слухачів, які вмикають новини чи ток-шоу під час роботи
• для водіїв, яким потрібно щось постійне у фоновому режимі

Більшість інтернет-радіо застосунків змушують користувачів робити надто багато зайвих кроків. У моєму все просто:

• один клік, щоб обрати жанр
• прокрутка або пошук станції за іменем чи описом
• ще один клік, щоб увімкнути
• натисни «серце», щоб зберегти у вибране

Щоб зробити прослуховування цікавішим, я додав аналізатор спектру частот — він не лише виглядає ефектно, а й показує, чи потік насправді активний.

Як я будував застосунок

Я створив його використовуючи об’єктно-орієнтований JavaScript (без фреймворків), PHP і MySQL.

Найбільші виклики були такими:

• збір і впорядкування адрес потоків
• регулярна перевірка їхньої доступності (багато з них зникають)
• підтримка різних форматів, як-от .m3u та .pls
• побудова аналізатора спектру частот

Що робить застосунок (простими словами)

По суті, він робить прослуховування інтернет-радіо максимально безперешкодним.

Ви можете зберігати улюблені станції, миттєво бачити, чи вони доступні, і користуватися чистим інтерфейсом, який не заважає.

Для мене аналізатор спектру частот — це «фактор задоволення»: він дає візуальний пульс музики й водночас виступає живим індикатором статусу.

Запуск і відгуки

Коли я запустив першу версію, не всі відгуки були позитивними: користувачам потрібно було не лише більше станцій — вони хотіли знати, чи потік «живий». Це було логічно: немає нічого більш дратівливого, ніж натиснути «Play» і почути тишу.

Тож я повернувся до роботи і створив індикатор зваженої доступності (weighted availability) разом з аналізатором спектру. Так з’явилася друга версія застосунку — значно якісніша й корисніша.

Що далі

Я працюю над:

• додаванням нових станцій
• реєстрацією користувачів
• окремим мобільним застосунком

Головна мета проста: демократизувати доступ до інтернет-радіо й заощадити людям час.

Чого я навчився

Не завжди потрібні фреймворки чи важкі бібліотеки — іноді достатньо чистого JavaScript ;)