How do I add streaming audio (using XSPF player) to my WEB PAGE or BLOG??? :Study Zone

Hello friends.. Are you interested in creating cute web pages??? Is this your Hobby??

You can add your own collections on your page. It just simple...

Here are those simple and easy tips...

Linking Directly to Audio Files

You can invite a user to play an audio file with a simple link like code0.

Script:

<a href="mysong.mp3">Listen to my band's latest release now!</a>

Of course you must actually create mysong.mp3 in the first place, and upload it to your web hosting space, placing it in the same folder with the page. If you have not recorded or edited your sound files yet, I recommend Audacity, an excellent piece of free, open-source software that does a fine job of recording and editing audio files. It is suitable for both simple recordings and elaborate multitrack songs.

Embedding Audio Files To Play in the Background

There are many ways to do this, offering various degrees of control and compatibility. In the past I've recommended embedding the music file directly with the or

Ideally, the major embedded media players - RealPlayer, Windows Media Player, and QuickTime - would agree on a standard way to "remote-control" what's going on. Then we could use JavaScript and HTML to create our own "music player" look and feel. Or at the very least, successfully fetch the title of the currently playing song!
Unfortunately, the big players have never come to agreement on this. So right now, we simply can't do that reliably and consistently with the three major media players. While they work okay for embedding just one song, they start to disappoint the moment you get past that level. So I don't recommend them.
Does that mean we're stuck? Heck no! Fortunately, Flash Player is the most popular web browser "plug-in" of all, reaching roughly 97% of all users. Those who don't have it are usually in work environments where all plug-ins are forbidden anyway. And unlike the three players that are dedicated exclusively to playing sound and video, Flash Player was always intended to give the designer lots of control. In fact, support for MP3 music in Flash Player was originally intended to jazz up interactive Flash "applets" and games.
What does that mean for us? It means that by using Flash, we can get excellent control over the appearance and behavior of our in-page music player.

"Open-source Flash applet? How is that possible?" The SWF file format used by Flash applets is a quasi-open standard. And Adobe doesn't prevent you from redistributing your Flash applet as open source.

While it's true that Adobe/Macromedia's Flash Professional software costs a pretty penny, other people have already created free, open-source Flash-based music player "applets" that you can embed in your own page. The best of these is XSPF Web Music Player, a simple, free music player applet that gets the job done. And since that software is open source, others have extended it to support useful features like shuffle play. I'll be pointing you to the download page for one of those extended versions.

Embedding Music With Flash And XSPF Web Music Player

Ready to go? Great! Here are the steps to add music to your web page with Flash and the XSPF Web Music Player. 1. Download Web Music Player software. Just follow the instructions on that page to fetch a zip file that contains both the "extended" version, which displays a playlist, and the "slim" version, which just shows the currently playing song.
2. Open up the "compressed folder" (zip file) you've just downloaded. Extract it to your hard drive with "extract all files," then open the folder you've extracted it to. There will be two sub-folders, "Extended" and "Slim." Open the one you prefer. Now locate the file xspf_player.swf (or xspf_player_slim.swf). Windows users probably won't see the .swf part of the name - just don't use the .as or .fla file. If you're not sure which is which, right-click and pick "Properties" to show more complete information.
3. Upload xspf_player.swf (or xspf_player_slim.swf) to your website and drop it in the same folder with your MP3 files. (You could put it somewhere else, but this tutorial will assume it is in the same folder.) Usually you can do this by dragging and dropping to your favorite file transfer program.
4. With Notepad or another text editor, create a simple "playlist" file and save it with the name: test.xspf
The playlist file should look like this. Notice the title element, which should name your band and album (or any other heading you consider appropriate), the location element for each track, which should specify the name of the .mp3 file (you can use a full URL here if the .mp3 file is not in the same folder), and the annotation element for each track, which should give the name of the song so the user can see what they are listening to. You can also specify an image element, which provides a URL to an image to be displayed in the box to the left of the song (in the larger "extended" player)
Script:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns = "http://xspf.org/ns/0/">
<title>My Band Rocks Your Socks</title>
<trackList>
    <track>
      <location>a.mp3</location>
      <image>songaimage.jpg</image>
      <title>Name Of Song A</title>
    </track>
    <track>
      <location>b.mp3</location>
      <title>Name Of Song B</title>
    </track>
    <track>
      <location>c.mp3</location>
      <title>Name Of Song C</title>
    </track>
    <track>
      <location>d.mp3</location>
      <title>Name Of Song D</title>
    </track>
</trackList>
</playlist>

5. Upload the playlist file, test.xspf, to your website as you would any other file.
6. Add the following code to your web page. This tutorial assumes your web page is in the same folder with your playlist file and xspf_player.swf:

Script:

Note: I've set the width and height as suggested on the XSPF Web Music Player web page, but you can set them larger if you wish. If you are using the slim player, you'll set the height attribute quite a bit lower.

"The data attribute and the param name="movie" element carry the same information. Do I need both?" Yes. Flash is embedded differently in different web browsers.

7. Refresh the page in your browser. Your music player is up and running!

When you make changes to an XSPF file, clicking Reload or Refresh in your browser will not reload the XSPF file. You will not see your changes, even if you restart your browser. Yes, it's really annoying, but it seems to be a fact of life with Flash. To be sure you see the effect of your changes, rename your XSPF file and change the name under which you load it in your web page. Clearing the cache may also be sufficient.

If It Doesn't Work

1. Make sure you uploaded the .swf file. 2. Make sure you uploaded your .xspf file. You did make one, right? If not, go back and read the instructions and do a thorough job.
3. Make sure you uploaded your .mp3 files.
3. If you are sure your HTML is correct and your browser shows the player but refuses to play the songs, it is possible that your web server doesn't allow files with a .xspf extension to be served. You can work around this by renaming your .xspf file to .txt. If you do so, you must change .txt to .xspf in both places where it appears in the object element.
--------------------------------------------
Alternatively, if you have a single image that's appropriate for all of your songs, you can set one up via the main_image parameter. In this example, the file cover.jpg is fetched from the same folder where the page is located:

Script:

If your image is larger than the box, it will be automatically resized to fit.

Alternate Method: For MIDI Files And Flash Haters

This is a great way to embed one or more songs in a web page. But maybe you have MIDI files, which this method can't support. Maybe you just hate Flash. And maybe you just want to know how to do it in a more generic way, without forcing the use of any particular player. This example shows how to do that. The following example accommodates browsers all the way back to Netscape 4.

Does the audio file have to be on the same site? No. Much like the src attribute of an img element, the src attribute of the EMBED element can point to any site you like with a full URL, such as http://www.example.com/examples/mysong.mp3.

Script:

By default, auto resume is off. To turn it on, you need to add &autoresume=1 to the end of the player URL, as shown here:

July 05, 2008