Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

HOW DO I ADD A INTERNET RADIO TO A PAGE? working on first project after learning html & css.

Hello,

Im working on my first project which happens to be remaking this website: www.allclassichiphop.com as you can probably tell by visiting it it wont be too hard to make something that is better.

The thing I am having issues with is on how to get rid of their "online radio player" and Use (or create) another one that is more appealing and more fit for a mobile/cellphone website. The owner of the radio is my friend so I can ask him for what i need and he will provide it but I'm just not sure on what to ask for.

Thank you!

11 Answers

Hey. I got interested in finding a way to create a very simple HTML5 player, so I put together a very bare player for you to mess around with. I uploaded it to jsfiddle:

https://jsfiddle.net/webdevelopnyc/nce1ohp6/

Let me know what you come up with. I'm curious to see what you plan on doing.

Also, don't forget to embed jQuery and the jQuery Player. You can find the source of jQuery Player below:

https://23f45749ac11f52a0241f2ebcbd10c69dc21fc79.googledrive.com/host/0B4GUMwpCU4Q7eExtb0Vuc0JtMTg

Thanks a lot! I already talk to the guy again he told me he will send me the ID and the port and everything in an email tomorrow when he is back at the station. is there a place where im gonna be able to plug that in in this player you made?

Do you want to use the stream from the website you linked or create your own? I don't really understand what you're trying to do? Are you asking how you design and create the player the stream is using?

I want to be able to add a different player to stream the audio that comes from his online radio station. he told me this is the direct link to the audio stream from his server: http://www.depothillmedia.com/listen/surge.pls

I just think the audio player they currently very ugly so I wanna be able to find or make a more appealing one.

I want to be able to add a different player to stream the audio that comes from his online radio station. he told me this is the direct link to the audio stream from his server: file:///Users/OmarSuriel/Documents/websites/1053thesurge/index.html

I just think the audio player they currently very ugly so I wanna be able to find or make a more appealing one.

sorry wrong link. this is the link he gave me: http://www.depothillmedia.com/listen/surge.pls

That's a local file. You aren't going to get anywhere with that. A direct link to his audio stream will most likely just be an IP address with a port (Ex. 76.554.67.23:8000), depending on what he's using to stream.

EDIT: That's better.

yeah i know that was a local file i messed up. i pasted the wrong link thats why i corrected myself and commented again with the correct link. http://www.depothillmedia.com/listen/surge.pls he told me that is the direct link to his online radio.

Let me start off by saying creating an HTML5 media player for SHOUTcast / Icecast audio stream is very difficult. I used to run my own SHOUTcast online radio station and I gave up the idea of creating my own after spending a lot of time on it figuring it out. That's why the players that are available are either not very good looking or cost a lot of money to purchase. Flash players are usually more popular because of how much easier they are to create, but it's not 2005 anymore, so creating something from flash for internet use isn't very wise. It's been a little less than a year since I spent time looking into this subject. To point you in the right direction, the stream is using an Icecast2 server. I was using SHOUTcast and do remember reading how Icecast has a better integration with browser extensions compared to SHOUTcast. Start looking into Icecast streaming software and find out the direct IP:PORT link to the streamers host. You're not gonna get far trying to use a .pls file format. Like I said earlier, the streamer most likely knows the what the direct link is to the host and port but isn't willing to give up that kind of information. It's not as if it matters too much, people just get iffy when sharing server IP information. Especially when it involves ports.

Thanks a lot man!! At least I know in which direction to go. And your right I don't know any jquery or js yet so yeah it might be too difficult for me to create my own if is not something I can just do in html and style with css. I was thinking that maybe there was a simpler solution that I just didn't know about but that explains why I couldn't really find anything on google. Thank you!

Thanks a lot! I already talk to the guy again he told me he will send me the ID and the port and everything in an email tomorrow when he is back at the station. is there a place where im gonna be able to plug that in in this player you made?

You don't need the IP and Port for playing the music. You'll need it to display name and artist of the song, the DJ, any album covers, etc. Here's an idea of what the page will look like when he gives it to you: http://164.138.29.82:8012/ (Check out that website. It's the front page of a SHOUTcast server).

The player I made in jfiddle can already play the station you requested.

Oh man sweet! so your saying that it works even with the link i previously gave you?

I ended up finding the mp3 format: http://zeus.cdnstream.com/1114_128#811415.mp3

oh man! how did you even find that?? I never even thought mp3s could be "streamed" i thought it had to be a file with an ending and also is that their direct link or is it being mirror by another server something?

I'm pretty sure that's the direct link to the streaming server, so all you need is the port (the IP is 23.227.179.202). If you go to the main URL (http://zeus.cdnstream.com), it's pretty obvious that's the link to the Icecast host the radio is streaming from. Without the help of the server administrator, I don't you'll be able to display any server side information that can only be shared with the first IP and port.

sweet man! i will try to make it all work tomorrow when i get back to it. im gonna get the port and all that info so ill try to get everything working like you said with the album art and everything. heres a link of what i try to make look like... this is a rough draft in PS but is something simple as you can see: www.sendspace.com/file/jupxas