Настройка кода плеера и вывода информации
Общая информация и полезные параметры
Важно! Все примеры полностью рабочие, но в них не указаны ссылки на потоки и отсутствует загрузка скрипта player.js - код которого доступен на странице вашего радио по нажатию кнопки Код плеера. Плеер от Myradio24 это не просто плеер, а уникальный конструктор позволяющий с легкостью создать любой свой современный плеер. Наш плеер поддерживает все современные браузеры и форматы вещания: mp3, aac+, ogg
Пример возможностей доступен тут: https://myradio24.com/%lang%/test
Полезные параметры. Обратите внимание, некоторые параметры должны передаваться в виде массива или в формате JSON:
Указание параметров плеера прямо в HTML теге
С недавнего времени настройки плеера можно задавать прямо в HTML элементе, при этом если в теге указан класс class="my_player", то плеер будет автоматически создан.
1. Пример создания сразу 2х плееров my_player и my_player2 на одной странице:
2. Настройка и запуск своего индивидуального custom плеера с идентификатором my_player_custom.
HTML плеера берется из скрытого div элемента my_player_custom_html, он с приставкой _html. Массив картинок задаётся в data параметре imagesurl.
Просто укажите свой массив картинок в imagesurl и свой HTML код плеера используя данный пример:
3. Перетягиваемый ползунок громкости для custom плеера, просто замените отделенный блок кода с my_volumediv в пункте 2 на этот код:
Бонус, чтобы сделать ползунок громкости вертикальным, просто поменяйте числовые значения размеров в 2х местах:
width:64px; height:7px; на width:7px; height:64px;
width:64px; height:5px; на width:5px; height:64px;
Примеры настройки и запуска плееров методом JavaScript
Возможность запуска плеера через JS с указанием параметров работает аналогично. При этом параметры переданные через JS всегда главнее тех что указаны прямо в HTML тегах. Рассмотрим пример запуска сразу нескольких плееров, обратите внимание на разные id плееров указанные в DIV элементах и в скриптах:
Примеры динамической смены потоков и управление Play / Stop / Volume
Функция $.fn.set_player() позволяет сменить поток вещания, регулировать громкость, а также включать и отключать плеер. Параметры и примеры ссылок с JS кодом для переключения потоков:
playerid - идентификатор плеера
volume - громкость от 0 до 100
autoplay - включение и выключение плеера (1 - включить, 0 - выключить, без autoplay - ничего не делать)
streamurl - новый URL адрес потока
Пример ручной обработки обновляемой информации через JS callback
Просто добавьте JS функцию my_updateinfo_callback на вашу страницу и используйте входящие данные info при интервальном обновлении с собственной обработкой. В данном примере мы получаем имя текущего ведущего и выводим в HTML элемент. Можно написать любой свой код.Cкрываем различную информацию в плеере
На текущий момент скрывать различную информацию в плеерах можно добавив на страницу стиль, возьмите нужное:
Примеры настройки визуализации
Вы можете установить несколько визуализаций, однако учтите что одна визуализация создаёт нагрузку на процессор до 10%.
Используйте параметры для настройки визуализации:
width - ширина
height - высота
data-size - кол-во полосок визуализации
data-revert - разворот визуализации (0 - по умолчанию на право, 1 - на лево)
data-color - цвет визуализации (rgb - цветной, red - красный, green - зеленый, blue - синий)
Примеры визуализации:
Настройка виджета чат
Чат поддерживает единственную настройку, это высоту блока data-height, пример:Настройка видео плеера в формате HLS
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Элемент div можно разместить в любом месте страницы, а вот скрипт нужно разместить в самом низу страницы.
Замените в коде VIDEOURL на вашу HLS ссылку в формате m3u8.
Вывод информации о исполняемом заказе из стола заказов
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Блок my_table_order автоматически будет скрыт, если трек не был заказан.
Вывод расширенного стола заказов 2.0 и записи с микрофона
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Вы можете вывести весь стол заказов с формой, с заказами и списком треков прямо на свой сайт.
Код всего стола 2.0 можно найти там же где и код стандартного стола.
Вы также можете использовать экспериментальную функцию записи с микрофона для авторизованных на VMESTE.EU.
Добавьте этот экспериментальный код в код стола 2.0 сразу после кнопки "Заказать музыку".