Настройка кода плеера и вывода информации
Общая информация и полезные параметры
Важно! Все примеры полностью рабочие, но в них не указаны ссылки на потоки и отсутствует загрузка скрипта player.js - код которого доступен на странице вашего радио по нажатию кнопки Код плеера. Плеер от Myradio24 это не просто плеер, а уникальный конструктор позволяющий с легкостью создать любой свой современный плеер. Наш плеер поддерживает все современные браузеры и форматы вещания: mp3, aac+, ogg
Пример возможностей доступен тут: https://myradio24.com/ru/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 class="my_play" style="width:64px; height:64px; background-image:url('https://myradio24.com/player/demo/play.png'); cursor:pointer;"></div>
<div class="my_timer" style="width:64px; font:26px Arial; color:#000000;">00:00</div>
<div class="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 class="my_volume" style="width:64px; height:16px; background:#cccccc; background-image:linear-gradient(#eeeeee, #aaaaaa); border-radius:3px;"></div>
</div>
<div class="my_loading" style="width:64px; font:16px Arial; color:#000000;"></div>
</div>
3. Перетягиваемый ползунок громкости для custom плеера, просто замените отделенный блок кода с my_volumediv в пункте 2 на этот код:
<div class="my_volumediv" style="width:64px; height:7px; position:relative; margin:5px 0; background:#333; border-radius:3px; cursor:pointer; user-select: none;">
<div class="my_volume" style="width:64px; height:5px; position:absolute; bottom:0px; border:1px solid gray; background:#fff; border-radius:3px; cursor:pointer;"></div>
<div class="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>
Пример ручной обработки обновляемой информации через JS callback
Просто добавьте JS функцию my_updateinfo_callback на вашу страницу и используйте входящие данные info при интервальном обновлении с собственной обработкой. В данном примере мы получаем имя текущего ведущего и выводим в HTML элемент. Можно написать любой свой код.
function my_updateinfo_callback(info) {
console.log(info.djname); //вывод в консоль
$('.mydjname').html(info.djname); //вывод в HTML <div class="mydjname"></div>
}
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 */
.my_cover {display:none;}
/* скрыть время только для одного плеера lite */
.my_player_lite .my_timer {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>
Настройка виджета чат
Чат поддерживает единственную настройку, это высоту блока data-height, пример:<div id="my_chat" data-height=170></div>
Настройка видео плеера в формате HLS
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Элемент div можно разместить в любом месте страницы, а вот скрипт нужно разместить в самом низу страницы.
Замените в коде VIDEOURL на вашу HLS ссылку в формате m3u8.
<div id="my_video"></div>
<script>
hlsvideo("VIDEOURL",'my_video',800);
</script>
Вывод информации о исполняемом заказе из стола заказов
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Блок my_table_order автоматически будет скрыт, если трек не был заказан.
<div id="my_table_order" style="display:none;"> От: <b data-myinfo="table_order.from"></b> Для: <b data-myinfo="table_order.for"></b> <div data-myinfo="table_order.comment"></div> </div>
Вывод расширенного стола заказов 2.0 и записи с микрофона
Данный код экспериментальный, может быть изменен и не гарантирует правильную работу.Вы можете вывести весь стол заказов с формой, с заказами и списком треков прямо на свой сайт.
Код всего стола 2.0 можно найти там же где и код стандартного стола.
Вы также можете использовать экспериментальную функцию записи с микрофона для авторизованных на VMESTE.EU.
Добавьте этот экспериментальный код в код стола 2.0 сразу после кнопки "Заказать музыку".
<script src="//vmeste.eu/lib/api.js?v4.92" requires="style_im.css"></script> <div style="position:relative;"><div class='vm_imRecord' onclick='vm_recording();' style='position:absolute; top:-36px;'></div></div>