Turn flash radio player code to html radio player code

Question

I have some very old code from www.muses.org/setup where I created a radio player. I am trying to host the skin files on my server but it forces me to use flash which is no longer supported.

This is the code for the widget it gives me:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="189" height="61">
<param name="movie" value="muses.swf" />
<param name="flashvars" value="url=https://rheath1.radioca.st/;&lang=en&codec=mp3&volume=75&introurl=&autoplay=true&tracking=true&jsevents=true&buffering=3&skin=ffmp3-testskin.xml&title=Kidz%20Corner Radio" />
<param name="wmode" value="transparent" />
<param name="allowscriptaccess" value="always" />
<param name="scale" value="noscale" />
<embed src="muses.swf" flashvars="url=https://rheath1.radioca.st/;&lang=en&codec=mp3&volume=75&introurl=&autoplay=true&tracking=true&jsevents=true&buffering=3&skin=ffmp3-testskin.xml&title=Kidz%20Corner Radio" width="189" scale="noscale" height="61" wmode="transparent" allowscriptaccess="always" type="application/x-shockwave-flash" />
</object>

Would anyone have any idea how to make this code work for html5 so it's supported? I have the files on my webserver already but it's a matter of making a responsive player via html instead of flash and still picking up where the player skin files are on my server.

Any ideas would be very helpful! Thank you!

Answer 1

For future readers:

• Copy the Muses Radio Player JS file to your server.
• Create an XML file and edit it with your server's image paths (URL).

For testing, paste this code below into a blank page, save as index.html then test the file in browser. Also put the .html, the .xml and images together in one place (eg: same folder).

This is an example of the final working code:

<!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'https://mystreamlink/;',
'lang':'en',
'codec':'mp3',
'volume':100,
'autoplay':false,
'jsevents':true,
'buffering':0,
'title':'My-Radio-Name',
'skin':'https://mywebsite.com/testSkin.xml',
'width':180,
'height':60
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->

note:

• The 'url' should end with /; (so add it, if needed).

• The shown 'width':180, 'height':60 settings must be changed.
  (to match your XML's <bg> image size).

The testSkin.xml file looks like this:
(an XML is just a text file, so you create it same like an HTML or TXT)

<muses-skin folder="test-skins-images" togglePlayStop="false">
  <bg image="bg.jpg" x="0" y="0" ></bg>
  <play image="play.jpg" x="10" y="10" clickimage="playclick.jpg" />
  <stop image="stop.jpg" x="50" y="10" clickimage="stopclick.jpg" />
  <text x="15" y="49" width="170" height="22" color="#ffffff" font="Arial" size="16" align="left" />
  <songtitle x="12" y="83" width="210" height="22" color="#000000" font="Arial" size="12" />
  <artist x="12" y="103" width="210" height="22" color="#000000" font="Arial" size="12" />
  <volume x="92" y="14" width="100" height="22" 
      colOr1="#ffffff" color2="#ff0000"
      barwidth="3"
      barStep="5"
      holderImage="holder.jpg"
      mode="holder"  You-can-try-with-mode="bars or vholder"
  />
  <status imagePlay="statusplay.jpg" imageStop="statusstop.jpg" x="2" y="2" />
</muses-skin>

Finally make sure the following images exist:

bg.jpg, play.jpg, playclick.jpg, stop.jpg, stopclick.jpg,
holder.jpg, statusplay.jpg and statusstop.jpg.