Setting up the player code and information output

General information and useful parameters

Important! All examples are fully functional, but they do not contain links to streams and do not load the player.js script - the code for which is available on your radio page by clicking the Player code button. The player from Myradio24 is not just a player, but a unique constructor that allows you to easily create any modern player. Our player supports all modern browsers and broadcast formats: mp3, aac+, ogg
An example of the possibilities is available here: https://myradio24.com/en/test
Useful parameters. Note that some parameters must be passed as an array or in JSON format:

 playerid - player identifier (each player must have its own)
player - player type default, lite, energy, adaptive or "custom" (your own player)
skin - style or background of the player: 
	"energy" player supports styles: blue, green, red, yellow, magento, gray
	"default" and "adaptive" accept a background color in hex format, for example #808080
width - player width, usually 200 pixels by default 
autoplay - automatic player activation (1 - enable, 0 - no)
volume - initial volume in % from 0-100
streamurl - stream URL
imagesurl - array of active image URLs for your "custom" player
playerhtml - HTML code of your "custom" player, in the new version automatically from the div element with the _html prefix, for example id=my_player_html

Specifying player parameters directly in the HTML tag

Player settings can be set directly in the HTML element, and if the class="my_player" is specified in the tag, the player will be created automatically. An example of creating 2 different players with the identifiers my_player1 and my_player2 on one page:

 <div id="my_player1" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="URL stream"></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 stream"></div>

Setting up and launching your own custom player   with the identifier my_player_custom

The HTML player is taken from the hidden div element my_player_custom_html , it has the prefix _html . The array of images is specified in the data parameter imagesurl . Just specify your array of images in imagesurl and your HTML code for the player using this example:

 <div id="my_player_custom" class="my_player" data-player="custom" data-streamurl="URL stream"></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>

Draggable volume slider for custom player, just replace the separated code block with my_volumediv in the code above with this code:
 <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>

Bonus, to make the volume slider vertical, just change the numerical values of the sizes in 2 places :
width:64px; height:7px; at width:7px; height:64px;
width:64px; height:5px; at width:5px; height:64px;

Examples of setting up and running players using JavaScript

The ability to launch a player via JS with parameters specified works similarly. In this case, parameters passed via JS are always more important than those specified directly in HTML tags. Let's consider an example of launching several players at once , pay attention to the different player IDs specified in DIV elements and in scripts:

 <div id="my_player1"></div>

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

<div id="my_player_custom"></div>
<!-- here you can place a block of code with id="my_player_custom_html" from point 2 with HTML examples -->


<script>
/* Isolate commands to run after page load */
document.addEventListener("DOMContentLoaded",function() {

	/* Launch "energy blue" player with default settings */
	$.player_init({playerid:"my_player1", player:"energy", skin:"blue", streamurl:"stream address here"});

	/* Launch the "default" player with individual settings and stream */
	$.player_init({playerid:"my_player2", player:"default", skin:"#101010", width:200, autoplay:1, volume:70, streamurl:"stream address here"});

	/* Launch your "custom" player. The player's HTML is taken from the div element with the _html prefix, the image array is set in data-imagesurl */
	$.player_init({playerid:"my_player_custom", player:"custom", streamurl:"here is the stream address"}});

});
</script>

Examples of dynamic stream switching and Play/Stop/Volume control

The $.player_set() function allows you to change the broadcast stream, adjust the volume, and turn the player on and off. Parameters and examples of links with JS code for switching streams:
playerid - player identifier
volume - volume from 0 to 100
autoplay - turn the player on and off (1 - turn on, 0 - turn off, without autoplay - do nothing)
streamurl - new stream URL

 <a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"stream address 64kbps"}); return false;'>Quality 64kbps</a>
<a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"stream address 128kbps"}); return false;'>Quality 128kbps</a>
<a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"stream address 320kbps"}); return false;'>Quality 320kbps</a>
<a href="#" onclick='$.player_set({playerid:"my_player", volume:0}); return false;'>Volume 0%</a>
<a href="#" onclick='$.player_set({playerid:"my_player", volume:100}); return false;'>Volume 100%</a>

Example of manual processing of updated information via JS callback

Just add the JS function my_updateinfo_callback to your page and use the incoming info data in interval updating with your own processing. In this example, we get the name of the current presenter and output it to the HTML element. You can write any code you want.

function my_updateinfo_callback(info) {
	console.log(info.djname); //output to console
	$('.mydjname').html(info.djname); //output to HTML <div class="mydjname"></div>
}

Hiding various information in the player

At the moment, you can hide various information in players by adding a style to the page, take the one you need:

 <style>

/* hide listeners */
.my_listeners {display:none;}

/* hide song title */
.my_song {display:none;}

/* hide time */
.my_timer {display:none;}

/* hide rewind */
.my_rewind {display:none;}

/* hide volume */
.my_mute {display:none;}
.my_volumediv {display:none;}

/* hide cover in adaptive player */
.my_cover {display:none;}

/* hide time for only one player lite */
.my_player_lite .my_timer {display:none;}

</style>

Examples of visualization settings

You can install multiple visualizations, but please note that one visualization creates a CPU load of up to 10%.
Use the parameters to customize the visualization:
width - width
height - height
data- size - number of visualization stripes
data- revert - visualization reversal (0 - default to the right, 1 - to the left)
data- color - visualization color ( r g b - color, red - red, green - green, blue - blue)

Visualization examples:

 //standard, color, 128 stripes
<canvas class=my_visualizer width=320 height=128 data-size=128 data-revert=0 data-color="rgb"></canvas>

//the same thing, but turned the other way
<canvas class=my_visualizer width=320 height=128 data-size=128 data-revert=1 data-color="rgb"></canvas>

//expanded, green, 64 stripes
<canvas class=my_visualizer width=320 height=128 data-size=64 data-revert=1 data-color="green"></canvas>

Setting up the chat widget

The chat supports only one setting, this is the height of the data-height block, example:
<div id="my_chat" data-height=170></div>

Setting up a video player in HLS format

EXPERIMENT: This code is experimental, subject to change and does not guarantee correct operation.
The div element can be placed anywhere on the page, but the script must be placed at the very bottom of the page.
Replace the URL in the code with your HLS link in m3u8 format.

<div id="my_video"></div>

<script>
$.player_hls({id:'my_video', url:'https://domain.com/video/playlist.m3u8', width:800});
</script>

Output of information about the order in progress from the order table

EXPERIMENT: This code is experimental, subject to change and does not guarantee correct operation.
The my_table_order block will be automatically hidden if the track has not been ordered.
<div id="my_table_order" style="display:none;">
From: <b data-myinfo="table_order.from"></b>
For: <b data-myinfo="table_order.for"></b>
<div data-myinfo="table_order.comment"></div>
</div>

Extended Order Table 2.0 and Microphone Recording Output

EXPERIMENT: This code is experimental, subject to change and does not guarantee correct operation.
You can display the entire order table with a form, orders and a list of tracks directly on your website.
The code for the entire table 2.0 can be found in the same place as the code for the standard table.
You can also use the experimental microphone recording feature for those logged in to VMESTE.EU.
Add this experimental code to your table 2.0 code immediately after the "Request Music" button.
<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>

Adding your own list/playlist to the adaptive player

EXPERIMENT: This code is experimental, subject to change and does not guarantee correct operation.
To create your own playlist or list for the adaptive player, you can add the code below to your radio page.
IMPORTANT! Don't forget to specify the correct LOGIN of your radio in the code in the link to the stream, as well as in the $.player_set() function.
Radio login in this function is required to use links from other stations with updated radio information.
<div id="my_playlist_custom" style="display:none;">

<div data-url="https://myradio24.org/LOGIN" onclick="$.player_set({radio:'LOGIN', playerid:'my_player', autoplay:1, streamurl:$(this).data('url')});">128 mp3</div>

<div data-url="https://myradio24.org/LOGIN_256" onclick="$.player_set({radio:'LOGIN', playerid:'my_player', autoplay:1, streamurl:$(this).data('url')});">256 mp3</div>

</div>