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

playerid - идентификатор плеера (у каждого должен быть свой)
player - вид плеера default, lite, energy или "custom" (свой плеер)
skin - стиль или фон плеера:
"energy" плеер поддерживает стили: blue, green, red, yellow, magento, gray
"default" и "adaptive" принимают цвет фона в hex формате, например #808080
width - ширина плеера, по умолчанию обычно 200 пикселей
autoplay - автоматическое включение плеера (1 - включить, 0 - нет)
volume - начальная громкость в % от 0-100
streamurl - URL адрес потока
imagesurl - массив активных URL картинок для своего плеера "custom"
playerhtml - HTML код своего плеера "custom", в новой версии автоматически из div элемента с приставкой _html, например id=my_player_html

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

1. Пример создания сразу 2х плееров my_player и my_player2 на одной странице:

<div id="my_player" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="URL-поток"></div>

<div id="my_player2" class="my_player" data-player="default" data-skin="#101010" data-width=200 data-autoplay=0 data-volume=70 data-streamurl="URL-поток"></div>

2. Настройка и запуск своего индивидуального custom плеера с идентификатором my_player_custom.
HTML плеера берется из скрытого div элемента my_player_custom_html, он с приставкой _html. Массив картинок задаётся в data параметре imagesurl.
Просто укажите свой массив картинок в imagesurl и свой HTML код плеера используя данный пример:

<div id="my_player_custom" class="my_player" data-player="custom" data-streamurl="URL-поток"></div>

<div id="my_player_custom_html" style="display:none;" data-imagesurl="{'play':'https://myradio24.com/player/demo/play.png','pause':'https://myradio24.com/player/demo/pause.png'}">
<div id=my_play style="width:64px; height:64px; background-image:url('https://myradio24.com/player/demo/play.png'); cursor:pointer;"></div>
<div id=my_timer style="width:64px; font:26px Arial; color:#000000;">00:00</div>
<div id=my_volumediv style="width:64px; height:16px; background:#303030; background-image:linear-gradient(#202020, #303030); border-radius:3px; cursor:pointer; text-align:left; user-select:none;">
<div id=my_volume style="width:64px; height:16px; background:#cccccc; background-image:linear-gradient(#eeeeee, #aaaaaa); border-radius:3px;"></div>
</div>
<div id=my_loading style="width:64px; font:16px Arial; color:#000000;"></div>
</div>

3. Перетягиваемый ползунок громкости для custom плеера, просто замените отделенный блок кода с  my_volumediv в пункте 2 на этот код:

<div id="my_volumediv" style="width:64px; height:7px; position:relative; margin:5px 0; background:#333; border-radius:3px; cursor:pointer; user-select: none;">
<div id="my_volume" style="width:64px; height:5px; position:absolute; bottom:0px; border:1px solid gray; background:#fff; border-radius:3px; cursor:pointer;"></div>
<div id="my_volumecursor" style="position:absolute; top:-8px; left:-2px; width:11px; height:21px; background:url('https://myradio24.com/player/demo/cursor.png'); background-size:cover; cursor:pointer;"></div>
</div>

Бонус, чтобы сделать ползунок громкости вертикальным, просто поменяйте числовые значения размеров в 2х местах:
width:64px; height:7px; на width:7px; height:64px;
width:64px; height:5px; на width:5px; height:64px;

Примеры настройки и запуска плееров методом JavaScript
Возможность запуска плеера через JS с указанием параметров работает аналогично. При этом параметры переданные через JS всегда главнее тех что указаны прямо в HTML тегах. Рассмотрим пример запуска сразу нескольких плееров, обратите внимание на разные id плееров указанные в DIV элементах и в скриптах:

<div id="my_player"></div>

<div id="my_player2"></div>

<div id="my_player_custom"></div>
<!-- тут можно разместить блок кода с id="my_player_custom_html" из пункта 2 с HTML примерами -->

<script>
/* Изолируем команды для запуска после загрузки страницы */
document.addEventListener("DOMContentLoaded",function() {

/* Запуск плеера "energy blue" с настройками по умолчанию */
$.fn.init_player({playerid:"my_player", player:"energy", skin:"blue", streamurl:"тут адрес потока"});

/* Запуск плеера "default" с указанием индивидуальных настроек и потока */
$.fn.init_player({playerid:"my_player2", player:"default", skin:"#101010", width:200, autoplay:1, volume:70, streamurl:"тут адрес потока"});

/* Запуск своего плеера "custom". HTML плеера берется из div элемента с приставкой _html, массив картинок задаётся в data-imagesurl */
$.fn.init_player({playerid:"my_player_custom", player:"custom", streamurl:"тут адрес потока"}});

});
</script>

Примеры динамической смены потоков и управление Play / Stop / Volume
Функция $.fn.set_player() позволяет сменить поток вещания, регулировать громкость, а также включать и отключать плеер. Параметры и примеры ссылок с JS кодом для переключения потоков:
playerid - идентификатор плеера
volume - громкость от 0 до 100
autoplay - включение и выключение плеера (1 - включить, 0 - выключить, без autoplay - ничего не делать)
streamurl - новый URL адрес потока

<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"адрес потока 64kbps"}); return false;'>Качество 64kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"адрес потока 128kbps"}); return false;'>Качество 128kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"адрес потока 320kbps"}); return false;'>Качество 320kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", volume:0}); return false;'>Громкость 0%</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", volume:100}); return false;'>Громкость 100%</a>

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

<style>

/* cкрыть слушателей */
#my_listeners {display:none;}

/* cкрыть название песни */
#my_song {display:none;}

/* cкрыть время */
#my_timer {display:none;}

/* cкрыть перемотку */
#my_rewind {display:none;}

/* cкрыть громкость */
#my_mute {display:none;}
#my_volumediv {display:none;}

/* cкрыть обложку в плеере adaptive */
/* для плеера adaptive используйте вместо # всегда точку */
.my_cover {display:none;}

</style>

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

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

//стандарт, цветной, 128 полосок
<canvas class=my_visualizer width=320 height=128 data-size=128 data-revert=0 data-color="rgb"></canvas>

//тоже самое, но развернутый в другую сторону
<canvas class=my_visualizer width=320 height=128 data-size=128 data-revert=1 data-color="rgb"></canvas>

//развернутый, зеленый, 64 полоски
<canvas class=my_visualizer width=320 height=128 data-size=64 data-revert=1 data-color="green"></canvas>

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

<script>
/* Задавайте HTML-код картинок для ваших диджеев построчно */
var my_avatars=[];
my_avatars['']='<img src="URL-адрес картинки по УМОЛЧАНИЮ">';
my_avatars['Auto-DJ']='<img src="URL-адрес картинки для Auto-DJ">';
my_avatars['Dj Name']='<img src="URL-адрес картинки для Dj Name">';
</script>

Подпись автора

http://besposhhadnye.ru/