Internet radio website like pandora

[AleXHB]

Hello,

I found a tutorial and im looking to create my own website like pandora in html5 or ajax for my country (or at least that's my plan).

The tutorial explains almost everything except 3 things: how to make the songs to not repeat if they have already been played, how to show the album art of the picture and play songs according to categories (like pop, rock, hip hop, etc).

Here is the link to the tutorial: LINK

I hope you can help me and thanks.

[phoenix_2000]

welcome Alex,

I've looked through the tutorial rather quick, but i might have some plans to achieve your goals.
Just to start with the easy one, album covers.
When you create a database, you could add another field, like coverSrc, containing the link to the right cover
In your HTMl, i'd create a DIV that will soon hold your album art. i would recommend giving the div a pre-defined width and height, to prevent it from resizing all the time if the size of your covers differ.

In your PHP file, you should also get that new field, and put it in a variable. let's call it $cover for eases' sake.

one of the functions in your JScript file would then have this code:

document.getElementById("yourCoverDifFieldIDhere").innerHTML = "<img src='" + $('#cover').html(string[1]) + "' />";

I didn't test this though, but maybe it gets you on the right track

Oh, and when you have a bigger database, it is probably better to use a albumID instead of an url, and then have a seperate database containing the name and cover source of the album.
If you don't plan on making this a huge application, i'd say this is unnecessary.

playing by catogory: To play by category, you'll need another field in the database called... category.
second, you'll need a dropdown list containing all the categories. make sure you only list the ones that you actually have in your database, else you would just get an error message.

I'm not exactly an expert on AJAX, but if i remember correctly it's possible to pass along information from your javascript to the PHP file.
If you can send it to your PHP file, as if it was an POST value, you can check wether that value is set, and then show a different SQL.

in PHP this'd be:

IF (isset($_POST['CAT']))
{    
    $song = $db->get_row("SELECT * FROM songs WHERE category=" . $_POST["cat"] . " ORDER BY RAND() LIMIT 1");
}
ELSE
{
    $song = $db->get_row("SELECT * FROM songs ORDER BY RAND() LIMIT 1");
}

In english if your user wanted a specific category, select a row where the category is... well, whatever the user wants :) or else execute the piece of SQL you already had.

Once again, this isn't tested.

Unfortunatly, i can't think of any easy method for repeat protection, i guess waiting for someone else to react here, or asking the author of the tutorial for help.

Sorry for the long post, and if it seems a bit confusing, teaching is not exactly my speciality :)

[AleXHB]

Thank you very much but none of them are working. The picture is not being displayed and when you select a category it sends you to getsong.php and it stays there so there is a blank page.

[phoenix_2000]

hmm, i never really tested them out myself, but i do think that if the picture is not displayed, you've got a JScript error somewhere.

Can you check if the browser returns any errors? Internet explorer shows a yellow exclamation mark at the bottom left, and firefox has the web console, but i can't find it so fast

I'll try it out myself if i've got time, and will share the code here if it works :)

[phoenix_2000]

i just got the album working: you'll need a new map to hold the images, and a new column in you table containing the link to the album (in my case, the column "album" had as content "albums/youralbumhere.png")

in getsong.php, add a single variable for the album, just as we have it for the title, and in the final echo we'll need another seperator and add the variable for the album

and in you main page, add a div that holds the album cover, give it an id (like album).
Finally, in the JScript, use $("#youralbumdivid").html() to add the album's image.
Do note that you'll have to insert more then plain text (like the other rows that look the same)
but you'll have to insert some html. so ( "<img src=' + "string[4]" + "'>" )

try it out now, if it doesn't work, i'll include my code.
one note: i want to do as much as possible without external libraries, so i didn't use ezsql in getsong.php. but only some "classic" sql.
getsong.php

IF(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
$connect = mysql_connect("127.0.0.1", "root", "vertrigo");
$select = mysql_select_db("songs", $connect);

$sql = "SELECT * FROM songs ORDER BY RAND() LIMIT 1";
$sql1 = mysql_query($sql);
$row = mysql_fetch_array($sql1);
$artist = $row["artist"];
$songname = $row["title"];
$url = $row["url"];
$album = $row["album"];
$separator = '|';
	echo $url.$separator.$artist.$separator.$songname.$separator.$album;
}

and here's the demo.html:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
	<title>Online radio using jQuery</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
	<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){
	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			var data = $.ajax({
			  url: "getsong.php",
			  async: false
			 }).responseText;

		    var string = data.split('|');
			$(this).jPlayer("setMedia", {
				mp3: string[0]
			}).jPlayer("play");
			
			$('#artist').html(string[1]);
			$('#songname').html(string[2]);
			$('#album').html("<img src='" + string[3] + "' width='250' height='250' />");
		},
		ended: function (event) {
			var data = $.ajax({
			  url: "getsong.php",
			  async: false
			 }).responseText;

		    var string = data.split('|');
			$(this).jPlayer("setMedia", {
				mp3: string[0]
			}).jPlayer("play");

			$('#artist').html(string[1]);
			$('#songname').html(string[2]);
			$('#album').html("<img src='" + string[3] + "' width='250' height='250' />");
	    },
		swfPath: "js",
		supplied: "mp3"
	});
});
//]]>
</script>
</head>

<body>
	<div id="album" class="album"></div>
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-audio">
			<div class="jp-type-single">
		    	<div id="jp_interface_1" class="jp-interface">
					<ul class="jp-controls">
						<li><a href="#" class="jp-play" tabindex="1">play</a></li>
						<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
						<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
					</ul>

					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>

					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>

					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>

				<div id="jp_playlist_1" class="jp-playlist">
					<ul>
						<li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

[AleXHB]

Thank you for your help, now its working. If you know how to make the songs not to repeat, please post it here.

Thanks.

[plmexico79]

how can I add a next button?

[Troy III]

underneath Pandora lies a highly sophisticated A.I., developed and refined for almost two decades.