Add mobile friendly Streaming Online Internet Radio using HTML5

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.

20 comments :

  1. pronobFebruary 7, 2014 at 5:37 PM

    http://liveexpressradio.com/category/tamil/

    ReplyDelete
  2. pronobFebruary 7, 2014 at 5:38 PM

    Hello all, listen to your favorite Tamil online radio station here.

    ReplyDelete
  3. pronobFebruary 7, 2014 at 5:39 PM

    http://liveexpressradio.com/ listen online radio

    ReplyDelete
  4. ambreen11March 6, 2014 at 10:53 AM

    Hi there, I found your blog by the use of Google whilst searching
    for a comparable topic, your website came up, it seems to be good. I’ve
    bookmarked it in my google bookmarks.

    ReplyDelete
  5. gabrielMarch 31, 2014 at 2:57 AM

    thanks man,you got a like from me

    ReplyDelete
  6. Lacy BrownMarch 31, 2014 at 1:56 PM

    Thank you for such
    a very good tips. It will help a lot.

    Youtube
    Help

    ReplyDelete
  7. Free Online RadioMay 13, 2014 at 5:02 PM

    Join Radio Azad Dallas, TX USA’s free online radio NOW. Just tune in to our online radio station to listen to your favorite Bollywood music online.
    Find Apple app here -->> https://itunes.apple.com/us/app/radio-azad/id420115789?mt=8

    ReplyDelete
  8. cell phone detectorMay 29, 2014 at 6:23 PM

    You actually make it seem so easy with your presentation but
    I find this matter to be really something which I think I would never
    understand. It seems too complicated and extremely broad for me. I'm looking
    forward for your next post, I'll try to get the hang of it! CELL
    PHONE DETECTOR

    ReplyDelete
  9. cell phone detectorMay 29, 2014 at 6:30 PM

    You actually make it seem so easy with your presentation but
    I find this matter to be really something which I think I would never
    understand. It seems too complicated and extremely broad for me. I'm looking
    forward for your next post, I'll try to get the hang of it! CELL
    PHONE DETECTOR

    ReplyDelete
  10. PrakashJune 26, 2014 at 4:03 PM

    Impressive blog. And very interesting post. Thanks for sharing this.. keep on posting.

    http://www.chennaireliancedatacard.in

    ReplyDelete
  11. Roshan GhimireJuly 5, 2014 at 4:13 PM

    HOW TO REPLACE THE CODE FOR COUNTRY BASED STATION??? i mean i am from nepal so i want to play local station from nepal???so please help me to modify this code for local station????

    ReplyDelete
  12. farJuly 12, 2014 at 1:57 PM

    tankzzz brooo

    ReplyDelete
  13. SoumyaJuly 12, 2014 at 4:12 PM

    Which station you would like to play? You should find the streaming link. If you tell write the station name here I will try to help.

    ReplyDelete
  14. codigosparablogAugust 29, 2014 at 7:48 AM

    Great article, I'm new here. Thank you very much for giving us the honor to pass on some of your knowledge!

    Codigos para Blog - Author

    ReplyDelete
  15. Robin ThomasNovember 2, 2014 at 8:17 PM

    I know how to display local language fonts in opera mini by enabling
    bitmap fonts in the opera configuration settings but how to enable the
    same settings in OPERA CLASSIC browser for android.???? opera:config settings different for this browser...

    ReplyDelete
  16. StationZillaMarch 24, 2015 at 6:03 PM

    listen to + 60.000 radio stations! Available on PC, Tablet, Mobile
    http://stationzilla.com
    enjoy new music you'll love!

    ReplyDelete
  17. Ratnesh ChoudharyMarch 27, 2015 at 3:51 PM

    I am not able to play the radio with this following code

    I am using this url http://www.addate.com/spiceradio/spicerdasx.asx instead of http://keralaradio.in/media/KeralaRadio.asx but only getting a black color box instead of player

    ReplyDelete
  18. pjoshi235May 8, 2015 at 4:31 PM

    I cant embed this dtream for android
    rtmp://media3.streamcom.net/Mirchi/Mirchi

    ReplyDelete
  19. SoumyaMay 9, 2015 at 7:56 AM

    Hello,
    To use this method, the browser must support the format of the stream.
    rtmp streams are not natively supported by browsers. So, you must use third party players which supports rtmp streams. However, you must host the files required for player.
    Below are some players which support rtmp stream. Flow player seems to be free.
    http://flash.flowplayer.org/plugins/streaming/rtmp.html
    http://support.jwplayer.com/customer/portal/articles/1430358-using-rtmp-streaming

    ReplyDelete
  20. pjoshi235May 16, 2015 at 5:16 PM

    I use StrobeMediaPlayback, work better than jw player in mobile.

    ReplyDelete

Subscribe to: Post Comments ( Atom )