Загружено за 0.003
     
   
  H1 H2 H3 P
Главная » Myradio24 » Настройка кода плеера и вывода информации от Myradio24.com
Изменено 16.09.2018

Настройка кода плеера и вывода информации от Myradio24.com

Общая информация и полезные параметры

Важно! Все примеры полностью рабочие, но в них не указаны ссылки на потоки и отсутствует загрузка скрипта player.js - код которого доступен в разделе Установка. Плеер от Myradio24 это не просто плеер, а уникальный конструктор позволяющий с легкостью создать любой свой современный плеер. Наш плеер поддерживает все современные браузеры и форматы вещания: mp3, aac+, ogg
Пример возможностей доступен тут: https://myradio24.com/?to=test
Полезные параметры. Обратите внимание, некоторые параметры должны передаваться в виде массива или в формате JSON:


Указание параметров плеера прямо в HTML теге

С недавнего времени настройки плеера можно задавать прямо в HTML элементе, при этом если в теге указан класс class="my_player", то плеер будет автоматически создан. 

1. Пример создания сразу плееров 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 адрес потока


Cкрываем различную информацию в плеере

На текущий момент скрывать различную информацию в плеерах можно добавив на страницу стиль, возьмите нужное:


Примеры настройки визуализации

Вы можете установить несколько визуализаций, однако учтите что одна визуализация создаёт нагрузку на процессор до 10%.
Используйте параметры для настройки визуализации:
width - ширина
height - высота
data-size - кол-во полосок визуализации
data-revert - разворот визуализации (0 - по умолчанию на право, 1 - на лево)
data-color - цвет визуализации (rgb - цветной, red - красный, green - зеленый, blue - синий)

Примеры визуализации:


Настройка вывода картинки вещающего DJ'я (аватарка)

В последней версии кода плеера с информацией появилась простая возможность задать картинки для вещающих диджеев. В информационный HTML блок достаточно добавить %htmlavatar% и потом задать картинки диджеев используя скрипт, который можно разместить перед кодом плеера: