Embed player in HTML to listen to internet radio stream

Shoutcast, MP3, server, php, sql, ...

Moderator: elliot

Embed player in HTML to listen to internet radio stream

Postby plr » Mon Dec 28, 2009 2:44 pm

I am a novice when it comes to HTML. I looked at several posts on the internet for embedding a media player in HTML to listen to internet radio and can get something to work with Windows Media player but was looking to do something better. I have inserted the code I have working below. I figured this out from other forum boards. The problem with windows media player is it does not display the song/artist information and several stations do not support the format.

The reason I am doing this is for my own personal use. I listen to internet radio stations (mostly Delicious Agony) while doing work and have been using winamp for this....but I got tired of winamp using 50M of memory just to play internet radio. What I want to do is play internet radio within Firefox. By running a simple player within firefox, my memory usage is much less. I was able to develop some HTML to play internet radio using Windows Media player (see code below). I managed to get this to work by creating pull down menu to select from the 4 different internet radio streams. I only managed to get 2 of the 4 to work because only 2 of them stream in WMP compatible format. Furthermore, WMP stinks because it does not display song and artist information.

So, I am looking for someone to recommend a media player that can be embedded in html and play streaming internet radio stations other than windows media player format and convert my code to run with it. I tried using VLC (videolan org) but could not get it to work and have posted on their forums board asking for help but do not have a reply.

I managed to get this code working from other posts on other message boards. It may not be the best way to do something but it worked...so if there are dumb things in it, please fix them also.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript"><!--
function song(){
document.getElementById('music1').innerHTML="<embed type='application/x-mplayer2' id='music2' pluginspage='http://www.microsoft.com/Windows/MediaPlayer/' src='"+document.getElementById('cancion').value+"' name='MediaPlayer1' width='300' height='75' controltype='2' showcontrols='1' showstatusbar='1' AutoStart='true'></embed>";

<div id="jukebox">JUKEBOX<br><br>
<select id="cancion" onchange="song()" size="1">
<option value="none">::::::::::::: Choose Your Song Here :::::::::::::</option>
<option value="">Delicious Agony</option>
<option value="http://live.str3am.com:2010">Aural Moon</option>
<option value="">Silver Eel</option>
<option value="http://www.stellar-attraction.com/wmp71.asx">Stellar Attraction</option>

<span id="music1"><embed type="application/x-mplayer2" id="music1"

Posts: 2
Joined: Fri Dec 25, 2009 11:44 am

Postby plr » Tue Jan 05, 2010 3:34 pm

I was able to get this to work using Real Player. Here is the code if anyone is interested. The .rpm files are simply text files with the URL address of the radio station.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<title>Multiple Video Controls Linked with the CONSOLE Parameter</title>


<H1>Internet Radio Player Interface</H1>
<EMBED SRC="auralmoon.rpm" CONSOLE=_master WIDTH=350 HEIGHT=128 NOJAVA=true CONTROLS=All>


<H4>Aural Moon</H4>
<EMBED SRC="auralmoon.rpm" CONSOLE=video1 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="auralmoon.rpm" CONSOLE=video1 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>


<H4>Stellar Attraction</H4>
<EMBED SRC="stellar.rpm" CONSOLE=video2 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="stellar.rpm" CONSOLE=video2 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>


<H4>Silver Eel</H4>
<EMBED SRC="silvereel.rpm" CONSOLE=video3 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="silvereel.rpm" CONSOLE=video3 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>


<H4>Delicious Agony</H4>
<EMBED SRC="delicious.rpm" CONSOLE=video4 WIDTH=44 HEIGHT=26 NOJAVA=true CONTROLS=PlayButton>
<EMBED SRC="delicious.rpm" CONSOLE=video4 WIDTH=26 HEIGHT=26 NOJAVA=true CONTROLS=StopButton>


Posts: 2
Joined: Fri Dec 25, 2009 11:44 am

Postby elliot » Tue Jan 05, 2010 7:42 pm

Thanks! Hopefully this will be useful to others.
VP, Program Director, Webmaster, Chief techno-geek
Pamela Progsnob's "producer"
Delicious Agony Progressive Rock Radio
User avatar
Site Admin
Posts: 470
Joined: Tue Aug 24, 2004 5:24 pm
Location: New Hampshire, USA

Return to Technical Talk

Who is online

Users browsing this forum: No registered users and 1 guest