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.
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.
controls: This tells that the audio controls like play button, mute, seek etc should be visible. Without this noting will be visible.
preload: This is set to none as we are streaming a radio and not an audio file.
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)
type: This tells that the stream is mp3 format. Without this the stream may not play.
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.
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
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
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
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????
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...
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
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
http://liveexpressradio.com/category/tamil/
ReplyDeleteHello all, listen to your favorite Tamil online radio station here.
ReplyDeletehttp://liveexpressradio.com/ listen online radio
ReplyDeleteHi there, I found your blog by the use of Google whilst searching
ReplyDeletefor a comparable topic, your website came up, it seems to be good. I’ve
bookmarked it in my google bookmarks.
thanks man,you got a like from me
ReplyDeleteThank you for such
ReplyDeletea very good tips. It will help a lot.
Youtube
Help
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.
ReplyDeleteFind Apple app here -->> https://itunes.apple.com/us/app/radio-azad/id420115789?mt=8
You actually make it seem so easy with your presentation but
ReplyDeleteI 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
You actually make it seem so easy with your presentation but
ReplyDeleteI 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
Impressive blog. And very interesting post. Thanks for sharing this.. keep on posting.
ReplyDeletehttp://www.chennaireliancedatacard.in
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????
ReplyDeletetankzzz brooo
ReplyDeleteWhich 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.
ReplyDeleteGreat article, I'm new here. Thank you very much for giving us the honor to pass on some of your knowledge!
ReplyDeleteCodigos para Blog - Author
I know how to display local language fonts in opera mini by enabling
ReplyDeletebitmap 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...
listen to + 60.000 radio stations! Available on PC, Tablet, Mobile
ReplyDeletehttp://stationzilla.com
enjoy new music you'll love!
I am not able to play the radio with this following code
ReplyDeleteI 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
I cant embed this dtream for android
ReplyDeletertmp://media3.streamcom.net/Mirchi/Mirchi
Hello,
ReplyDeleteTo 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
I use StrobeMediaPlayback, work better than jw player in mobile.
ReplyDelete