Add mobile friendly Streaming Online Internet Radio using HTML5

6 comments :

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.

Read More

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

19 comments :

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://radiojoyalukkas.com/rdja.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

WordPress solved problem unable to login on sub-domain, after domain name change

No comments :

Recently while setting up Wordpress for my recipe site and custom sub domain for this site, I have faced these two problems
  1. Unable to login to my Wordpress after change in domain name change.
    • Before activating actual domain of my recipe site, I have used a temporary domain name to the site. But after activating to the main site, login page took me to the old address which does not exists. So I was not able to use wordpress.
  2. Unable to login, when I was trying to install wordpress on a sub domain.
    • I have created a sub domain(seorecipetool.techcollections.co) for the domain(www.techcollections.co) which I am hosting on Blogger. So I configured the name-servers accordingly and installed wordpress using GoDaddy's hosting automated installation. But the wordpres login failed because the wordpress installation is configured for the actual domain www.techcollections.co.

For both the problem, root cause and solution is same.

Root cause: 

During automated installation, the wordpress MySQL database is initialized with the old domain name. After update of domain or creation of sub domain, the database file is not updated. So after login, the login page(wordpress) will try to forward to the old domain name in the configuration file. This will cause the login to fail.

Fix:

  1. First for updating the wordpress MySQL it is necessary to know the database username and password.
  2. For that, go to wordpress installation folder using ftp access or hosting file manager and find the file wp-config.php and find the below lines.
    // ** MySQL settings - You can get this info from your web host ** //
    /** The name of the database for WordPress */
    define('DB_NAME', 'xxxxx');

    /** MySQL database username */
    define('DB_USER', 'xxxxx');

    /** MySQL database password */
    define('DB_PASSWORD', 'xxxxx');
  3. Backup the MySQL Wordpress database.
  4. Now from hosting options open the MySQL database using the user name and password found above.
  5. In MySQL database look for options table.
  6. In options table there is field called URL.
  7. Correct the domain name here and save.
  8. Now you will be able to login to the wordpress.

Read More

Make images and youtube videos responsive in blogger post

No comments :

Now a days it has become very important to make responsive pages due to a many devices with different screen size available now and more people are using these mobile devices for browsing and reading. Responsive web pages should be designed to render properly on all devices.
In blogger there are many responsive templates which are free and paid available for download. These templates are very helpful for making the your blog responsive.
Still in some templates, the pictures inserted in the posts are not responsive due to the fixed size options provided by blogger post editor.
In this case you can follow these simple steps to make the picture responsive. This method can also be used if you do not have a responsive template, but want the picture to be of certain percentage of the page body. For example you may want the image to fill the page body by width or you may want the image width to be half the size of the page width.

  1. Switch to HTML view in blogger editor after adding picture
  2. Find <img followed by link to the image
  3. Add the code style="width: 100%; height: auto;" after <img with a space separating img and new code.
  4. Preview and post.
  5. Do this only before posting. Because, blogger manipulates the html code when you edit again. This may cause problem with appeariance.
  6. For youtube videos embed the youtube iframe between the following code &lt;style&gt;.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }&lt;/style&gt;&lt;div class='embed-container'> Your YouTube video embed code from share option in YouTube video page </div>

Note:

  • If you have installed a responsive blogger template, but blogger default template is loading the you have to follow these steps to disable default blogger template for mobile.
  • By changing the value 100% to a lower value in code for image, it is also possible to keep the image always smaller by a percentage of page body.

Read More

Malayalam language reading support in UC browser

No comments :

UC Browser overview

I have already written post on how to read Malayalam or Tamil in mobile using Opera Mini. But I gets lot of request for reading Malayalam/Tamil on mobile using UC browser. Like Opera mini, UC browser is one of the popular web browser for mobile phone and also supports many types of mobiles like
Right now there are no options in UC browser to read Malayalam without installing the Malayalam/Tamil fonts on mobile. If your phone supports installing Unicode fonts or any font install hacks(which are not safe for your mobile) are available for your mobile then you can install Malayalam fonts and start browsing.
But don't worry you can still install opera mini version 4 or later, then configure it for bitmap fonts to read Malayalam.

Note:

  • In java version 9.0 and above(now 9.4), UC browser started adding bitmap fonts for other languages like Arabic, Persian, Urdu, Hindi, and Bengali also. All you have to do is to activate Menu>Settings>Advanced>Bitmap Font. Hopefully they will extent this to other languages including Malayalam, Tamil etc 
  • Configuring bit map font in UC Browser for Java
    Bit map font option in UC Browser for Java
  • There are mods(modified versions) available in different languages, however there are only translated versions and still need fonts installed to work.

UC Browser Promo in YouTube

Screenshots of UC Browser


V9.4 Home screen
v9.4 Welcome screen
V mini8.8 Welcome screen
V mini8.8 Home screen

Read More