PDA

Click to See Complete Forum and Search --> : HTML for a music player

lerch
09-22-2004, 08:56 PM
Hi all, Im making a site and I would like it to play a list of songs. I coded up a play but it can only play one song. If someone could give me the html code so I can have a play list that would be great.
My code is <embed src="/music/C&C.m3u" width="200" height="40" autostart="false" loop="false"></embed>

Thanks!
Shawn
09-24-2004, 11:40 PM
I don't know if this fits what your looking for, but I'm almost finished with a streaming MP3 player I've been working on to give away for free just to see others enjoy the fruits of my labor! You can see a preview of it in the files section here:
http://www.metalblend.com

Although I am just writing the instructions so it will be available for download later tonight (in a variety of colors!). I am working to make this as painless as possible to get running on your website so if you want a cool streaming player for your site, I hope you'll take a look at mine :)
JesusWaffle
09-25-2004, 02:31 AM
For starters, I recommend using the <object> element instead of the <embed> element, for the following reasons:


Object is a w3c specification, and therefore a web standard.
Object is forwards-compatible.
Object can also be used for many other things, which makes it cool.


Please refer to the w3c HTML 4.01 specification (http://www.w3.org/TR/html401) for data on the object element (http://www.w3.org/TR/html4/struct/objects.html#h-13.3).

Okay, that said, to make a playlist, you need to run some JavaScript. I'll begin with a sample page:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<script type="text/javascript" language="JavaScript">
<!--
function chooseSound(filename)
{
document.getElementById("player").getAttribute("data") = filename;
}
-->
</script>

</head>

<body>

<p><h1>Music Player w/ Playlist</h1></p>

<p><object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" data="foo.mp3" id="player" /></p>

<p><h3>Choose a Sound to Play: </h3>
<ul>
<li><a href="#" onclick="chooseSound('foo.mp3'); return false;">foo</a></li>
<li><a href="#" onclick="chooseSound('bar.mp3'); return false;">bar</a></li>
<li><a href="#" onclick="chooseSound('monkeys.mp3'); return false;">Monkeys</a></li>
<li><a href="#" onclick="chooseSound('foobarmonkeys.mp3'); return false;">Foobar Monkeys</a></li>
</ul></p>

</body>

</html>

</body>

</html>

Now, that will work on the browsers of the present and the browsers of the future, but not the browsers of the past. I might be able to further obfustucate it to work on some slightly older browsers, but beyond that there's not much I can do. Anyway, if you want to use this, put the stuff between <script> and </script> in the head of your page, and for each link to a file set href to # and add an onclick attribute with a value like this:

chooseSound("yourfile"); return false;

Copy and paste the <object> element into your page where you want the player. Set the data attribute to your file.

Note that this will only work for mp3s. If you want to use a different file types, you'll need a different classid attribute.
lerch
09-26-2004, 09:06 PM
Thanks guys! I will check both out and see how they run