Add mobile friendly Streaming Online Internet Radio using HTML5

20 comments : at 11:05 PM Labels: ,

I have already written about adding an internet radio on to web page/blog. However it uses the media player plugin. Problem with the media player plugin is, it will not play on mobiles or PC/browsers without a media player plugin. In this post I will describe how to add an internet radio player HTML5 audio tag.
Note: There is no one thing fits all solution available. HTML5 also have limitations with respect to audio types supported by different browsers. There are custom libraries available which helps to play maximum formats using audio tags and alternate options such as flash, silver-light, etc(One of them is used here).
This method works best for mp3/ogg format radio streams which are widely supported by popular browsers like Mozilla Firefox, Google Chrome, Internet Explorer, Opera etc. However support can be extended using third party JavaScript/addins.
Well like I have written before, first step is to find the streaming radio link. Please check my previous post for how to find it.
In this case we should also know what format the stream is. Most of the links are mp3. So I would take example of an mp3 shoutcast stream.
http://viadj.viastreaming.net:7189/
This stream can be embedded using the following code.
<audio controls="" preload="none" src="http://viadj.viastreaming.net:7189/;" type="audio/"></audio>
Preview of the embedded html5 audio element below. This will not be visible if your browser does not support HTML5 audio element or mp3 format.
Now in this element there are following fields.
  1. controls: This tells that the audio controls like play button, mute, seek etc should be visible. Without this noting will be visible.
  2. preload: This is set to none as we are streaming a radio and not an audio file.
  3. src: Streaming radio link. The semicolon ; is important, without which streaming will not happen.(here link is not the link to the website, it is the stream link, see this post)
  4. type: This tells that the stream is mp3 format. Without this the stream may not play.
HTML5 audio player as rendered by Mozilla Firefox.

Read More

Add/Embed online internet radio player on your blog/website

18 comments : at 8:56 PM Labels:

Add online radio on blog or website
In my previous post I have listed some radio stations which can be played online using the embedded player. In this post I will explain how to embed an online internet radio player on a blog/website.
  1. Get the link to the station. This can be extracted from the website of the respective station or a playlist file which is used to play the station or by searching in google.
    Search for the link to station which you want to embed.
    Some examples are
    • http://87.76.29.145:8400/
    • http://radio2.simple-url.com:8169/
    • http://50.7.96.138:8173/radioasiab
    • mms://212.72.165.19/radiodumdum1
    Some sites/radio also provides playlist files such as .pls, .asx, .ram etc. Try to use these links directly, or download(use a download manager) these files and open using notepad to get the stream.
    Some sites/radio will not have these playlist files, but just the player embedded. In this case use the view source or inspect element option in browser to examine the web page source and find the stream link.
  2. Go to the html view of the blog/website and past the following code at the place where you want the player to appear.
<div id="movId" name="movId" align=center>

<object id="MediaPlayer1" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" width="400" height="300">
  <param id="FileName" name="FileName" value="">
  <param name="animationatStart" value="true">
  <param name="transparentatStart" value="true">
  <param name="autoStart" value="true">
  <param name="showControls" value="true">
  <param name="fullScreen" value="false">
 <embed src="http://keralaradio.in/media/KeralaRadio.asx" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" autostart="1" showcontrols="1" width="400" height="45">
</object>
</div>

In the code where ever the string "http://keralaradio.in/media/KeralaRadio.asx" is present, should be replaced by the link to internet radio station which you want to stream.
If you want the page to start streaming/playing automatically, then change in line
<param name="autoStart" value="false"> 
false to true and change in line no 10 autostart="1" to autostatrt="0"

And this will be the resullt of the above code.



Click the play button to start playing/streaming the radio station.

Read More
Subscribe to: Posts ( Atom )