Below is code for an the HTML5 audio player. Put the code into the
of your websites markup. This should be it's own web page, something like www.mywebsite.com/my_internet_radio_player.html. How to write HTML and upload to your web server is beyond the scope of this tutorial. There are plenty other tutorials out there on writing HTML and uploading.
\nWhen first setting this up, it's best to add two HTML5 audio players to your website, where one has your private IP address, and the other has your public IP address. Typically, in your LAN, only the HTML5 audio player with your private IP address will work, and on the other hand, you would use the HTML5 audio player with the public IP address when using remote computers outside your LAN.
Legal Warning!: Without express writen consent, by playing Music online, you could be liable to copyright legal proceedings by the owners of the music.
- Go here to get your public IP address (it's highlighted in yellow): www.whatismyip.com.
- Get the private IP address (it's highlighted in pink) from your Icecast.xml file (ex. 192.168.0.108)
- Get the port number (it's highlighted in tan) from the Icecast.xml file.
For my network saavy friends out there, whom are already thinking ahead, later we will cover dynamic dns, to get around the problem of the changing public IP address. However, now is not the time to get into dynamic dns. First, we need to keep it simple and just get on the air, then we can dive into ways to enhance your Internet Radio.
WAN HTML5 web player (public IP address)
22.214.171.124:8123/stream?type=.mp3" type="audio/mp3">You are using an old web browser. Change or update your browser.
LAN HTML5 web player (private IP address)
192.168.0.108:8123/stream?type=.mp3" type="audio/mp3">You are using an old web browser. Change or update your browser.
Popup box If you would like this web player to pop-up in it's own window, add this code to the of your websites HTML.
Then if you wanted a "click here" hyperlink, you would use this code. Of course, change the URL to point to your actual HTML web page that has the above code.