Setting up the player code and information output

General information and useful parameters

Important! All examples are fully working, but they do not contain links to streams and do not load the player.js script - the code of 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 designer that allows you to easily create any modern player of your own. Our player supports all modern browsers and broadcast formats: mp3, aac+, ogg
An example of the capabilities is available here: https://myradio24.com/en/test
Useful options. Please note that some parameters must be passed as an array or in JSON format:

 playerid - player identifier (each should have its own)
player - type of player default, lite, energy or "custom" (your player)
skin - player style or background: 
	"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, default is usually 200 pixels 
autoplay - automatically turn on the player (1 - enable, 0 - no)
volume - initial volume in % from 0-100
streamurl - stream URL
imagesurl - an array of active URL images for your "custom" player
playerhtml - HTML code of your "custom" player, in the new version automatically from a div element with the _html prefix, for example id=my_player_html


Specifying player parameters directly in the HTML tag

Recently, player settings can be specified directly in the HTML element, and if the class class="my_player" is specified in the tag, the player will be automatically created.

1. An example of creating 2 players at once my_player and my_player2 on one page:

 <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 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>


2. Setting up and launching your individual custom player   with identifier my_player_custom .
The player's HTML is taken from the hidden div element my_player_custom_html , it is prefixed with _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>


3. Dragable volume slider for custom player, just replace the separated code block from my_volumediv in step 2 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 launching players using JavaScript

The ability to launch the player via JS with parameters specified works similarly. At the same time, parameters passed through JS are always more important than those specified directly in HTML tags. Let's look at an example of launching several players at once , pay attention to the different player ids indicated in DIV elements and in scripts:

 <div id="my_player"></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 the "energy blue" player with default settings */
	$.fn.init_player({playerid:"my_player", player:"energy", skin:"blue", streamurl:"stream address here"});

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

	/* Launch your "custom" player. The HTML of the player is taken from the div element with the _html prefix, the array of images is specified in data-imagesurl */
	$.fn.init_player({playerid:"my_player_custom", player:"custom", streamurl:"here is the stream address"}});

});
</script>


Examples of dynamic thread change and Play / Stop / Volume control

The $.fn.set_player() function allows you to change the broadcast stream, adjust the volume, and also turn the player on and off. Parameters and examples of links with JS code for switching threads:
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='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"64kbps stream address"}); return false;'>Quality 64kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"stream address 128kbps"}); return false;'>Quality 128kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"stream address 320kbps"}); return false;'>Quality 320kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", volume:0}); return false;'>Volume 0%</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", volume:100}); return false;'>Volume 100%</a>


An example of manual processing of updated information via JS callback

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

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


Hiding various information in the player

Currently, 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 the cover in the adaptive player */
.my_cover {display:none;}

/* hide time for only one lite player */
.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 options to customize the visualization:
width - width
height - height
data- size - number of visualization strips
data- revert - reversing the visualization (0 - by 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 in the other direction
<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 only setting the chat supports is the block height data-height , example:
<div id="my_chat" data-height=170></div>

Setting up a video player in HLS format

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 needs to be placed at the very bottom of the page.
Replace VIDEOURL in the code with your HLS link in m3u8 format.

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

<script>
hlsvideo("VIDEOURL",'my_video',800);
</script>

Displaying information about the order being executed from the order table

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>

Output of the extended order table 2.0 and microphone recording

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 2.0 table 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 authorized on VMSTE.EU.
Add this experimental code to the table code 2.0 right after the "Order 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>