Каталог онлайн радио на JS
Допустим, у меня 10 блоков div с названиями радиостанций. Мне надо, чтобы при нажатии на блок запускалось воспроизведение радиоканала, при этом сам блок работающего радио можно было оформить (т.е. он должен получать какой-то понятный мне id для оформления css стилями - для примера можно его обвести красной рамкой).
В отдельном блоке div при старте радио должны выводиться:
- название,
- кнопка pause/stop (меняется: при работе радио отображается stop, при выключении play),
- кнопка refresh (перезапускает работающий или остановленный выбранный поток)
- шкала увеличения/уменьшения громкости (можно просто + и - с цифрой от 0 до 10 между ними)
- кнопка выключения звука (mute)
- ссылка на официальный сайт
- название текущего трека с автообновлением в 10 секунд (если название трека не передаётся в метаданных радио, то выводить информационную строку типа "Станция не передаёт названия треков")
При повторном открытии страницы надо, чтобы сайт запоминал последнее прослушанное посетителем радио, на той же громкости, как он уже слушал. Также нужно, чтобы подключение к потоку автоматически обновлялось, если его трансляция почему-то остановилась.
Идеи по улучшению приветствуются. Возможно, я что-то не учёл. Стоимость обсуждаема