Radionomy - Board
https://forum.radionomy.com/

[WEBSITE] How to embed multiple players on a single webpage
https://forum.radionomy.com/viewtopic.php?f=25&t=16833		 Page 1 of 3
Author:  Bob [ Mon Oct 12, 2015 4:52 pm ]
Post subject:  [WEBSITE] How to embed multiple players on a single webpage
Radionomy provides 3 different players:

Medium 300x389 px
Attachment:
medium.PNG
medium.PNG [ 226.69 KiB | Viewed 22436 times ]


Mobile 320x90 px
Attachment:
mobile.PNG
mobile.PNG [ 59.82 KiB | Viewed 22436 times ]


Horizontal 728x90 px
Attachment:
horizontal.PNG
horizontal.PNG [ 108.59 KiB | Viewed 22436 times ]


These can be found on your Radionomy site https://www.radionomy.com/en/radio/your-radioname
Attachment:
Exportable-player.PNG
Exportable-player.PNG [ 17.64 KiB | Viewed 22436 times ]


How to embed multiple players on a single webpage (CSS)
Below 3 examples include the code.
You copy the script on the Radionomy website and place it in the table code <th>script</th>
To place multiple players on the page, you give each player its own ID. (on the image, displayed in red)

  • Player 1 ID is "radplayer1"
  • Player 2 ID is "radplayer2"
  • Player 3 ID is "radplayer3"
  • Player 4 ID is "radplayer4"
  • etc., etc.
Attachment:
Script.PNG
Script.PNG [ 30.55 KiB | Viewed 22436 times ]


3 players type "medium" as follows :
Attachment:
players-medium.PNG
players-medium.PNG [ 755.75 KiB | Viewed 22436 times ]


Demo: https://radio-nostalgia.nl/demo/players-medium.html

Source code with script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }

}
</style>
</head>
<body>

<table>
  <tr>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'medium');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></th>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'medium');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></th>
    <th><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'medium');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>

</table>

</body>
</html>


Source code without script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }

}
</style>
</head>
<body>

<table>
  <tr>
    <th></th>
    <th></th>
    <th></td>
  </tr>

</table>

</body>
</html>


4 players type "mobile" as follows :
Attachment:
players-mobile.PNG
players-mobile.PNG [ 211.51 KiB | Viewed 22436 times ]


Demo: https://radio-nostalgia.nl/demo/players-mobile.html

Source code with script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'mobile');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'mobile');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'mobile');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer4'));
radplayer4('url', 'radiotuto');
radplayer4('type', 'mobile');
radplayer4('autoplay', '0');
radplayer4('volume', '50');
radplayer4('color1', '#000000');
radplayer4('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
</table>

</body>
</html>


Source code without script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>


4 players type "horizontal" as follows :
Attachment:
players-horizontal.PNG
players-horizontal.PNG [ 351.35 KiB | Viewed 22436 times ]


Demo: https://radio-nostalgia.nl/demo/players-horizontal.html

Source code with script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer1'));
radplayer1('url', 'radio-nostalgia');
radplayer1('type', 'horizontal');
radplayer1('autoplay', '0');
radplayer1('volume', '50');
radplayer1('color1', '#000000');
radplayer1('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer2'));
radplayer2('url', 'radio-tijdloos');
radplayer2('type', 'horizontal');
radplayer2('autoplay', '0');
radplayer2('volume', '50');
radplayer2('color1', '#000000');
radplayer2('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer3'));
radplayer3('url', 'studio-ant');
radplayer3('type', 'horizontal');
radplayer3('autoplay', '0');
radplayer3('volume', '50');
radplayer3('color1', '#000000');
radplayer3('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
  <tr>
    <td><script>
(function (win, doc, script, source, objectName) { (win.RadionomyPlayerObject = win.RadionomyPlayerObject || []).push(objectName); win[objectName] = win[objectName] || function (k, v) { (win[objectName].parameters = win[objectName].parameters || { src: source, version: '1.1' })[k] = v; }; var js, rjs = doc.getElementsByTagName(script)[0]; js = doc.createElement(script); js.async = 1; js.src = source; rjs.parentNode.insertBefore(js, rjs); }(window, document, 'script', 'https://www.radionomy.com/js/radionomy.player.js', 'radplayer4'));
radplayer4('url', 'radiotuto');
radplayer4('type', 'horizontal');
radplayer4('autoplay', '0');
radplayer4('volume', '50');
radplayer4('color1', '#000000');
radplayer4('color2', '#ffffff');
</script>
<div class="radionomy-player"></div></td>
  </tr>
</table>

</body>
</html>


Source code without script

Code:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
border-spacing: 20px;
margin-left: auto; margin-right: auto; }
}
</style>
</head>
<body>

<table>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><</td>
  </tr>
</table>

</body>
</html>


Have fun :)
Author:  JazzRepublicRadio [ Mon Oct 12, 2015 10:14 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
Thanks :)

Nigel J.
Author:  ukrnb [ Sun Dec 27, 2015 1:32 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
Yeah, but how do I add this? Where do I post the chosen code?

Quote:
You copy the script on the Radionomy website and place it in the table code <th>script</th>
To place multiple players on the page, you give each player its own ID. (on the image, displayed in red)

Player 1 ID is "radplayer1"
Player 2 ID is "radplayer2"
Player 3 ID is "radplayer3"
Player 4 ID is "radplayer4"


I see no table code on the website
Author:  elmbury [ Sun Dec 27, 2015 11:29 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
ukrnb wrote:
Yeah, but how do I add this? Where do I post the chosen code?

Quote:
You copy the script on the Radionomy website and place it in the table code <th>script</th>
To place multiple players on the page, you give each player its own ID. (on the image, displayed in red)

Player 1 ID is "radplayer1"
Player 2 ID is "radplayer2"
Player 3 ID is "radplayer3"
Player 4 ID is "radplayer4"


I see no table code on the website

That depends entirely on your website building software - look at the instructions they have, they may call it something different.
Author:  jima [ Sun Feb 14, 2016 10:54 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
you are a genius.

worked great.

now, do you know how to make the wide player 700 width?

It's a little larger and it doesn't quite fit the 700 width area we need it to fit in.

Thank you.

Jim Atkinson/3WK.COM Owner
Author:  elmbury [ Mon Feb 15, 2016 1:35 am ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
The size of the radionomy players is not customisable - you will have to use a different player if you want something that is resizable.
Author:  DBOldies [ Thu Mar 24, 2016 12:15 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
Still not understanding how to take the script from my Radionomy station and place it on my website...Is there a place to find my specific script?

My station is DBoldies
Author:  elmbury [ Thu Mar 24, 2016 2:52 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
DBOldies wrote:
Still not understanding how to take the script from my Radionomy station and place it on my website...Is there a place to find my specific script?

My station is DBoldies

No further support until you complete your forum profile as you have been asked.
Author:  Sonia69 [ Wed May 04, 2016 12:32 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
Worked great.

?ow, do you know how to make the wide player 700 width?

It's a little larger and it doesn't quite fit the 700 width area we need it to fit in.

Thank you. :!:
Author:  elmbury [ Wed May 04, 2016 3:10 pm ]
Post subject:  Re: [WEBSITE] How to embed multiple players on a single webp
Sonia69 wrote:
Worked great.

?ow, do you know how to make the wide player 700 width?

It's a little larger and it doesn't quite fit the 700 width area we need it to fit in.

Thank you. :!:

See https://board.radionomy.com/viewtopic.php?f=25&t=16833#p87168
Page 1 of 3 All times are UTC
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/