View Full Version : How to Play song online?

09-28-2006, 01:32 AM
I have been looking for the answer for a long time, but could not reach to any answer. I am a novice web designer, have very little knowledge on web programming. I hope someone here could help me with the following.

The problem scenario is this:

I have a webpage where I have listed some classical songs so that page visitors can listen to song online. All files are in Real Audio format either with .rm or .ra extension. These individual audio files are linked with .ram files so that when visitor’s clicks on the song title, this .ram file launches RealPlayer and the clicked song starts playing. Once a song is played it stops. If user wants to hear another song, user needs to click on another song title to play that song. This is annoying for users.

However, I have seen on some websites where user can select the songs by clicking on the “Check Boxes” next to each song titles and play by clicking on the “Play” button. Therefore, user can select lists of their favourite songs by clicking on check box and play these together one after another. There are two other buttons also available for users: “Select All” songs and “Reset”.

It would be great if any web programmer could help me out. Looking forward to hear from you.

Thank you

09-28-2006, 06:08 AM
Don't know if you can embed RealAudio files, but you could try convert them to Windows Media Audio Files then embed them.

09-28-2006, 06:10 AM
No, I was wrong.

Quick Google Search gives me this:

<EMBED src="file.ra" autostart=true hidden=true>

Put this somewhere on your page and your done.

09-28-2006, 08:25 AM
I believe you'd need more info than that to play a media file. That could work, but to be fully supporting all possible browsers, you'd need object tags and links to suggested plugins for those who don't have the player, and things like that. Embedding can be complex.
However, I bet that is close, and might work somewhat.

As for the other questions--
1. Easiest-- "reset" button... no problem at all.
<input type="reset" value="reset">
Note that it must be within <form></form> tags and will reset all fields to their original (as opposed to just blank) states... that is to the values of the <... value=""> attribute in each. If missing, it will be blank.

2. Select all... well, this is likely javascript. I don't know of another way to do it.
The fairly simple way is to use:
<input type="button" value="Select all" onClick="checkname = checked; another = checked">
where, in the form, you have:
<input type="checkbox" name="checkname">
<input type="checkbox" name="another">

3. This is the hardest part. To play the songs in a row, you'd need some complex scripting, since you need to know the event when the song ends. This is one reason you need a more complex embed code. If you have that, perhaps you can add onSongend="function()" or something, where the javascript function is set to supply a new src for the embed.
I wouldn't really know how to do this.
Additionally, I can safely say that no matter how you do it, it likely won't be cross-browser compatible, at least not to more than the newest browsers, and likely not to all of them.
Another way to do this would be to use php.
If you did that, you could submit the form, then create the embed element server side, writing the code for it rather than modifying it live.
I think that would work better.
However, 1. you would need to submit the form, and wait for the next page to load, 2. it wouldn't be live, so you couldn't just uncheck/check as you listened, and 3. you would still have the problem of creating a playlist.
(You could even combine javascript and php using ajax, though that's getting too complex.)

My suggestions:
1. Look into the .ram format for being embedded and find all possible attributes. This could be very easy if there are attributes you can use, like, for example, creating a play list. I doubt that everything you need would be that easy, but it might.
2. If that gets too complex, which wouldn't surprise me, you might want to look into another option. I don't think that QT/WMV are better for this purpose due to the same reasons, but they might have a few more embed attributes that could help. I think the best option at that point would be to look into flash. It has controls for things like this and it's own version of JS, AS (actionscript).

Tangent, and probably not too related, but Quicktime format allows for media links, which are very small files (a few kb) that contain playlist data and play linked clips in a certain order, with some limited attributes.
Using QT pro ($30), you can create these media links by simply cutting/pasting into a QT window (and you can modify a few more settings).
The reason this could be relevant is that you could dynamically create a QT medialink file by using the method of your form.
Using php, you could take the selected checkboxes, use if statements to add clips to the playlist, then load that version of the media link into your page and play it, referencing the songs the user wanted.
The catch is that the format is complex and not something you could just edit in notepad. I'm not sure how complex, since I have never needed to deal with a QT medialink's code.
Probably a more complex answer than other solutions, so unless you're just curious, might be best to stay away from.
Also, since .rm files are text referencing .ram files, they work the same way. If you can include more than one link in a .rm (which I don't know), this could do the same thing as well as the fact that it would be easier than using QT because .rm files aren't that hard to read/write.... they have text, not just gibberish, for the most part.

In the end, the best solution may be flash, or even buying a premade flash radio station player, so you don't need to deal with coding it, depending on how much you want to take on.

This isn't an easy fix problem.