Web4Radio is a web-based player for Icecast and SHOUTcast streams that works in almost any browser, including those in mobile devices. It uses jPlayer to provide playback via Adobe Flash and HTML5 technologies. The goal is to allow broadcasters to reach as many listeners across platforms and devices as possible, without much technical effort.
You can launch a player at my station, Radio Thermo
Note: My station occasionally plays tracks that some may find offensive; listener discretion is advised. If the current track says "Offline", the player isn't broken, I forgot to program content! The station provides MP3 and OGG streams via an Icecast-kh server.
Web4Radio supports the following server types:
- Icecast2
- Icecast-kh
- SHOUTcast
Note: SHOUTcast2 is not supported at this time. If you operate a SHOUTcast2 server, have an in-depth knowledge of its configuration, and would like to help with testing, please reply to the issue in the tracker.
The following codecs are currently supported:
- MP3
- OGG Vorbis
Note: AAC support will be added in a future release. Due to limitations in Adobe Flash Player and browsers, AAC+ streams are unlikely to be supported in the future
To provide maximum compatibility, you should provide both an MP3 stream and and OGG stream. However, if you can only supply one format, it should be MP3. Most browsers support MP3; OGG provides a nice fallback for the rare case that a browser that does not support MP3 (e.g. non-mobile Firefox), and does not have Flash installed. IE and Safari do not support OGG out-of-the box.
Web4Radio has been successfully tested in the following browsers:
-
Internet Explorer
-
Mozilla Firefox
-
Google Chrome
-
Apple Safari
-
Opera
-
Mobile Safari (iPhone, iPad, Apple iOS 6)
-
Android >= 4.1 stock browser (users of older versions will be prompted to use Firefox for Android)
-
Windows Phone 8
The player probably works with most other modern devices/browsers. If you have successfully tested a browser/device that is not listed here, please open an issue in the tracker for it to be added.
The dependent components for Web4Radio are hosted by the free jsDelivr CDN. The only file that needs to be uploaded to your web server is a modified copy of the player.html file. The CDN is used for for those who cannot upload their own non-HTML content. If you do not trust the CDN, you should host the dependencies yourself, and modify the player code accordingly.
- Download a copy of this repository as a zip using the download button at the top of the Web4Radio repository page.
- Extract player.html from the zip
- Set the player options (within the quote marks), located at the bottom of the head section:
streamName- The written name of your streamstreamAddress- The server's addressstreamPort- The server's port numbermp3Mount- The name of the Iceast MP3 mount, without/s. If not applicable, (e.g. for SHOUTcast streams), leave as empty quotes""oggMount- The name of the Iceast OGG mount, without/s. If not applicable, (e.g. for SHOUTcast streams), leave as empty quotes""autoPlay- Sets automatic playbackstationId- If you are a StreamLicensing.com customer, enter your station ID number here to display the currently playing track in the player; all others should leave this set to empty quotes. Later versions of the player will provide now playing metadata for all users. To locate your station ID, log into the StreamLicensing.com client area, and edit your station, the URL in the address bar will then containid=where the following number is the station ID.
-
Save the modified player.html file, and upload it to your web server. The player code must be in a separate file/page, even if you plan to embed it in an existing page.
-
The player can then be launched in a popup from a link like this:
<a onclick="window.open('http://www.streamlicensing.com/stations/radiothermo/player.html', 'player', 'menubar=no,location=yes,resizable=yes,scrollbars=no,status=no, width=300, height=200');">Launch radio player</a>
Or, it can be embedded in an existing page as an iframe like this one:
<iframe src=http://www.streamlicensing.com/stations/radiothermo/player.html" width="300" height="300" scrolling="no" frameborder="0">
When using an embedded player, consider turning off auto play. Unsolicited sound may annoy visitors.
Replace the URLs in the above examples so that it points the page you uploaded on your site. It is best to use absolute URLs; some versions of IE don't like relative URLs.
The height may need to be adjusted if you do not show the song information, or need to show longer song information.
The issues below are caused by bugs in various browsers. Web4Radio does its best to avoid and/or work around them, but they can still cause problems in certain circumstances. Please do not report issues for known issues. If you have a working fix, please submit a pull request.
- Android browsers do not automatically play
- Android users on a slow/failed connection are sometimes shown the "incompatable browser" message as a false-positive
- Broken playback does not resume properly on non-mobile browsers without Flash
- When only an OGG stream with metadata is supplied (so MP3 can't be used instead), playback stops after each track in Google Chrome
- How can I customize the player's apperence?
Override the CSS of the jPlayer Blue Monday skin.
- I tried to get jPlayer working with SHOUTcast, but couldn't. What did you do differently?
When using a browser to access a SHOUTcast stream, you must append a ; to the end of the stream URL, otherwise SHOUTcast will serve the status page, rather than the stream. Web4Radio does this automatically for the user.
Source: Stack Overflow
- Where are the volume controls?
On mobile devices, the volume is controlled via the device's phyisical controls.
If you encounter a problem with Web4Radio, please use the issue tracker.
If Web4Radio has helped you increase your revenue, please consider donating to the jPlayer project. Without the hard work of the jPlayer team, Web4Radio would not exist.