Setting up the player code and information output

General information and useful parameters

Important! All examples are fully functional, but they do not include stream links or download the player.js script— the code for which is available on your radio page by clicking the Player Code button. The Myradio24 player is not just a player, but a unique builder that allows you to easily create any modern player. Our player supports all modern browsers and broadcast formats: mp3, aac+, and ogg.
An example of the capabilities is available here: https://myradio24.com/en/test
Useful parameters. Please 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
skin - style or background of the player: 
	The "energy" player supports the following styles: blue, green, red, yellow, magento, gray
	"default" and "adaptive" accept a background color in hex format, for example #808080
width - the width of the player, usually 200 pixels by default 
autoplay - automatically turns on the player (1 - turn on, 0 - no)
volume - initial volume in % from 0-100
streamurl - stream URL
imagesurl - an array of active image URLs for your custom player
playerhtml - HTML code for your custom player; in the new version, it's automatically generated from a div element with the _html prefix, for example, id=my_player_html

Specifying player parameters directly in the HTML tag

Player settings can be configured directly in the HTML element. If the tag specifies class="my_player" , the player will be created automatically. Here's an example of creating two different players with the IDs my_player1 and my_player2 on the same 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 , which has the _html prefix. The image array is specified in the imagesurl data parameter. Simply specify your image array in imagesurl and your player HTML code 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, simply change the size numbers 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

Launching a player via JS with parameters works similarly. Parameters passed via JS always override those specified directly in HTML tags. Let's look at an example of launching multiple players simultaneously . Note the different player IDs specified in the DIV elements and in the 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 the page loads */
document.addEventListener("DOMContentLoaded",function() {

	/* Launch the "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, and the image array is specified 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 example links with JS code for switching streams:
playerid - player identifier
volume - volume from 0 to 100
autoplay - turns the player on and off (1 - on, 0 - off, no autoplay - do nothing)
streamurl - the new stream URL

 <a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"64kbps stream address"}); return false;'>Quality 64kbps</a>
<a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"128kbps stream address"}); return false;'>Quality 128kbps</a>
<a href="#" onclick='$.player_set({playerid:"my_player", autoplay:1, streamurl:"320kbps stream address"}); 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>

An example of manual processing of updated information via a JS callback

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

function my_updateinfo_callback(info) {
	console.log(info.djname); //output to console
	$('.mydjname').html(info.djname); //HTML output <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. Choose 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 time for only one lite player */
.my_player_lite .my_timer {display:none;}

/* hide volume in all players */
.my_volumeplayer, .my_mute, .my_volumediv {display:none;}

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

/* hide share in adaptive player */
.my_share {display:none;}

</style>

Examples of visualization settings

You can install multiple visualizations, but please note that one visualization creates a processor 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 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 chat supports only one setting, the height of the data-height block, for 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 is not guaranteed to work correctly.
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>

Displaying information about an order in progress from the order table

EXPERIMENT: This code is experimental, subject to change and is not guaranteed to work correctly.
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 is not guaranteed to work correctly.
You can display the entire order table with the form, orders, and track list 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 is not guaranteed to work correctly.
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 for your radio station in the stream link code and 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>