Customizing the player code and displaying information
General information and useful parameters
Important! All examples are fully working, but they do not contain links to streams and there is no loading of the player.js script - the code of which is available on the page of your radio 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 of your modern players. Our player supports all modern browsers and broadcast formats: mp3, aac+, ogg
An example of features 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 ID (each should have its own) player - player type default, lite, energy or "custom" (custom player) skin - style or background of the player: "energy" player supports styles: blue, green, red, yellow, magento, gray "default" and "adaptive" accept background color in hex format, for example #808080 width - player width, default is usually 200px autoplay - automatic inclusion of the player (1 - enable, 0 - disable) 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 new version automatically from div element with _html prefix, for example id=my_player_html
Specifying player parameters directly in the HTML tag
Since recently, player settings can be set directly in the HTML element, and if the class="my_player" is specified in the tag, then the player will be automatically created.
1. An example of creating 2 players my_player and my_player2 at once 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="Stream 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="Stream URL "></div>
2. Setting up and launching your individual custom player with id my_player_custom .
The player HTML is taken from the hidden div element my_player_custom_html , prefixed with _html . An array of images is specified in the data parameter imagesurl .
Just specify your array of images in imagesurl and your HTML player code using this example:
<div id="my_player_custom" class="my_player" data-player="custom" data-streamurl="Stream 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. A draggable volume slider for a 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 numeric size values in 2 places :
width:64px; height:7px; to width:7px; height:64px;
width:64px; height:5px; to width:5px; height:64px;
Examples of setting up and launching players using the JavaScript method
The ability to launch the player through JS with parameters works similarly. At the same time, the parameters passed through JS are always more important than those specified directly in the HTML tags. Consider an example of launching several players at once , pay attention to the different id of the players specified 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() {
/* Start the "energy blue" player with default settings */
$.fn.init_player({playerid:"my_player", player:"energy", skin:"blue", streamurl:"stream address here"});
/* Start the "default" player with 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 set in data-imagesurl */
$.fn.init_player({playerid:"my_player_custom", player:"custom", streamurl:"stream address here"}});
});
</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 turn the player on and off. Parameters and examples of links with JS code for switching streams:
playerid - player ID
volume - volume from 0 to 100
autoplay - enable/disable the player (1 - enable, 0 - disable, no 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:"128kbps stream address"}); return false;'>Quality 128kbps</a>
<a href="#" onclick='$.fn.set_player({playerid:"my_player", autoplay:1, streamurl:"320kbps stream address"}); 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 through JS callback
Just add the JS function my_updateinfo_callback to your page and use the incoming info data to update intervals with your own processing. In this example, we get the name of the current presenter and render an HTML element. You can write any of your code.
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 the players by adding a style to the page, take what 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 art in adaptive player */
.my_cover{display:none;}
/* hide time for only one lite player */
.my_player_lite .my_timer {display:none;}
</style>
Visualization setup examples
You can install multiple visualizations, but keep in mind that one visualization creates a CPU load of up to 10%.
Use the options to customize the visualization:
width - the width
height - the height
data- size - number of visualization strips
data- revert - visualization reversal (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 strips <canvas class=my_visualizer width=320 height=128 data-size=128 data-revert=0 data-color="rgb"></canvas> //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> // unfolded, green, 64 stripes <canvas class=my_visualizer width=320 height=128 data-size=64 data-revert=1 data-color="green"></canvas>
Customizing the chat widget
Chat supports the only setting, this is the height of the data-height block, for example:<div id="my_chat" data-height=170></div>
Setting up the HLS video player
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>