Hell Yeah Pointer 3 «ФОРУМ ПОДДЕРЖКИ ⎞*°•.★БеСпОщАдНыЕ★.•°*⎛ Shapka

Видеочат: общение в эрочате в режиме онлайн – Беспощадные

НАШ ФОРУМ

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » НАШ ФОРУМ » Полезное для сайтов » Код плеера радио НАШ ФОРУМ


Код плеера радио НАШ ФОРУМ

Сообщений 1 страница 4 из 4

1

Код:
<!--PLAYER - Блок расположения плеера. Плееры: default, lite, energy или custom (свой плеер) (можно несколько) -->
<div id="my_player" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="https://myradio24.org/22698"></div>
<!--END PLAYER-->
Подпись автора

http://besposhhadnye.ru/

https://i.bcicdn.com/images/promo_tools/models/1bongacams_model_good_idea_728%D1%8590_rus.gif

0

2

Код:
<!--PLAYER - Блок расположения плеера. Плееры: default, lite, energy или custom (свой плеер) (можно несколько) -->
<div id="my_player" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="https://myradio24.org/22698"></div>
<!--END PLAYER-->

<!--VISUALIZER - Блок расположения визуализации. Цвета: rgb, red, blue или green  (можно несколько) -->
<canvas class="my_visualizer" width=320 height=128 data-size=64 data-revert=0 data-color="rgb"></canvas>
<!--END VISUALIZER-->

<!--INFOS - Информация о радио -->
<div data-myinfo="logo" style="width:300px; height:80px; background-size:cover;"></div>
<div data-myinfo="img" style="width:300px; height:300px; background-size:cover;"></div>
<br>
<b data-myinfo="song"></b><br>
Следует: <span data-myinfo="nextsong"></span><br>
<br>
<b>🎧</b> <b data-myinfo="listeners"></b> <span data-myinfo="isonline"></span> - <span data-myinfo="kbps"></span> kbps
<a href="//myradio24.org/22698.m3u" target="_blank"><img src="//myradio24.com/img/wmp.gif" title="Слушать радио в плеере" /></a>
<a href="//myradio24.com/player.php?port=22698" onclick="window.open(this.href,'player','width=300,height=30'); return false;"><img src="//myradio24.com/img/open.gif" title="Слушать радио в новом окне"/></a>
<br>
Вещает: <b data-myinfo="djname"></b><br>
<div data-myinfo="htmlavatar"></div>
<a href="#" target="_blank" data-myinfo="url"></a><br>
<br><br>
<!--END INFOS-->

<!--RANKS -->
<b>Статистика DJ's</b><br><br>
<div data-myinfo="htmlrank"></div>
<br><br>

<!--END RANKS-->

<!--SONGS -->
<b>Последние песни</b><br><br>
<div class="my_lastsongs" data-revert=1 style="display:inline-block;">
	<div class="my_lastsonghtml" style="display:none;">
    <div style="text-align:left; margin:3px;">
    	<img src="//myradio24.com/%songcover%" style="width:45px; height:45px; border-radius:4px; vertical-align:middle;"> &nbsp; 
    	%songtime% &nbsp;
    	<a href="https://www.youtube.com/results?search_query=%songencode%" target="_blank" title="Найти на YouTube">%song%</a> 
    </div>
	</div>
</div>
<br><br>
<!--END SONGS-->

<!--CHAT - Блок расположения чата. (тестируется) -->
<div id="my_chat"></div>
<!--END CHAT-->

<!--TABLE - Блок расположения стола заказов. -->
<b>Стол заказов</b> (в очереди <b class=my_table_turn>0</b>)<br><br>
<style>#my_table_on, #my_table_auto {display:none;}</style>
<div id=my_table_off>Сейчас заказы не принимаются.</div>
<div id=my_table_auto>
	<a href="https://myradio24.com/?to=table&port=22698" target=_blank><input type=button value="Заказать музыку к исполнению"></a>
</div>
<div id=my_table_on>
	<form id=my_table_form action="" method=post accept-charset="UTF-8">	
    <input type=text id=my_table_from maxlength=30 value="" placeholder="От кого*">
    <input type=text id=my_table_for maxlength=30 value="" placeholder="Для кого">
    <br>
    <input type=text id=my_table_artist maxlength=50 value="" placeholder="Исполнитель*">
    <input type=text id=my_table_song maxlength=50 value="" placeholder="Название трека*">
    <br>
    <textarea id=my_table_comment cols=50 rows=3 maxlength=500 placeholder="Ваш комментарий"></textarea><br>
    * - поля обязательные для заполнения<br>
    <input type=submit value="Заказать музыку к исполнению">
	</form>
</div><br>
<!--END TABLE-->

<!--Этот скрипт должен располагаться в самом низу после всех блоков и не должен повторяться на странице. -->
<script src="//myradio24.com/player/player.js?v3.18" data-port="22698" data-interval=15 data-vmid=0></script>

https://myradio24.com/?to=set&port=22698

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

http://besposhhadnye.ru/

https://i.bcicdn.com/images/promo_tools/models/1bongacams_model_good_idea_728%D1%8590_rus.gif

0

3

Настройка кода плеера и вывода информации
Общая информация и полезные параметры
Важно! Все примеры полностью рабочие, но в них не указаны ссылки на потоки и отсутствует загрузка скрипта 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/

https://i.bcicdn.com/images/promo_tools/models/1bongacams_model_good_idea_728%D1%8590_rus.gif

0

4

Код не работает. Сайт на wordpress

0


Вы здесь » НАШ ФОРУМ » Полезное для сайтов » Код плеера радио НАШ ФОРУМ