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

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

Важно! Все примеры полностью рабочие, но в них не указаны ссылки на потоки и отсутствует загрузка скрипта 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>