How can I embed music (or any other audio file) to my iWeb created site? How can I have people listening to it not only on one page but have the music to continue no matter which page they are looking at? What about Popup windows?

That’s what you could do:                                         or       

See how I embedded it on this page (where it says: click here first if you want to play music during the slideshow)

Note that you're not allowed to publish any music to your website of which you don't own the copyright or don't have the permission of the copyright owner to do so or you pay a royalty to the copyright holder. If you do publish music to your website without the right to do so you don't HAVE to but you COULD get sued! Putting music on a website means that you're providing the music to others who could easily download it even if you don't want them to do so. Downloading it is not illegal, providing it is illegal (have a look at the Note at the bottom of the page about DRM Free music you buy on iTunes)

Unless the music was created and published under Creative Commons License (What's that?) wich means that you’re free to share it.

To find some creative common licensed music go to:

Jamendo.com or have a look at the following blog post at largeheartedboy.com

Note that people usually already listen to music with iTunes, radio, ... while browsing the web. Hence having the music playing automatically on your website and not letting the visitor choose whether he wants to listen to music or not should be avoided. Give the user control of it.

CHAPTERS LIST

Chapter 1: How to get the music or any other audio online

Chapter 2: How to build a Flashplayer

2.1 Using myflashfetish.com

2.2 Using a simple flash player

2.3 Using flashskins.co.uk

2.4 Using XSPF Web Music Player

2.5 The best music player

2.6 Note about compilations

Chapter 3: How to insert a Flashplayer into a page

Chapter 4: How to create a popup window for the music

Chapter 5: Using quicktime player instead of a flash player (which I wouldn't recommend)

Chapter 6: If you want to hide a player on your page have a look at this page by RoddyMcKay

Chapter 7: Note about iTunes music

Chapter 1: How to get the music or any other audio online

1. Search for the music you want to play

2. Download it and put all of the songs in a folder

3. Upload the folder containing your mp3's to your server (example: create a Folder named Music and in that folder a folder called Playlist1, Playlist2 and so on if you want to have more than one playlists)

- For MobileMe go to the Finder menu and select Go/iDisk/My iDisk/ or hit Schift+Command(Apple)+i and then go to /Web/Sites/. Drop your file into the "Sites" folder or create a folder you call 'Music'

Entering: http://web.me.com/username/filename.mp3 or http://web.me.com/username/Music/filename.mp3 or http://web.me.com/username/Music/Playlist1/filename.mp3 in your browser should bring up this file.

- If you're publishing to folder put it in the main location on your server using an ftp program

Entering: http://yourbaseurl.com/filename.mp3 or http://yourbaseurl.com/Music/filename.mp3 or http://yourbaseurl.com/Music/Playlist1/filename.mp3 in your browser should bring up this file.

Chapter 2: How to build a Flashplayer

2.1 Using myflashfetish (used for the example on this website)

1. Sign up to http://www.myflashfetish.com/ (that's the one I used to create my players) or any other platform where you can build a Flashplayer with your music

2. Make a playlist

- Choose a skin you want to use (appearance of the player, I use the iPod nano because I love it)

- There will be fields saying MP3 Title (don't use special characters like è ä and ' & and so on) and MP3 URL (http://yoururl/Music/Playlist1/filename.mp3 or yoururl/Music/filename.mp3 or whatever)

3. At the end save the playlist and get the code

2.2 Using a simple flash player

1. Click here to download the source files of the player

2. Upload the “SFPSource” folder to the main location (root) of your server

3. Copy the following code and modify it as explained

<script language="JavaScript" src="http://yourdomain.com/SFPSource/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://yourdomain.com/SFPSource/player.swf" id="audioplayer1" height="24" width="290">

<param name="movie" value="http://yourdomain.com/SFPSource/player.swf">

<param name="FlashVars" value="playerID=1&amp;autostart=no&amp;soundFile=http://yourdomain.com/Music/FileName.mp3">

<param name="quality" value="high">

<param name="menu" value="false">

<param name="wmode" value="transparent">

</object>

Substitute yourdomain.com with your domain

Change the parameters height and width (in pixel) to fit your case

autostart=no or autostart=yes whether you want the song top play automatically or not

Substitute http://yourdomain.com/Music/FileName.mp3 with the URL to the mp3 music file you want to play

audioplayer1 and playerID=1: if you have multiple players on the same page change the number to 2 in the code of the second player, 3 in the code of the third player, 4 in the code of the fourth player and so on...

4. Paste the code into your page.

2.3 Using flashskins.co.uk

1. Go to flashskins.co.uk and download or buy the player you want

2. Upload the folder with the files you get to your server

3. Read the instructions.html file you find in the folder to know how to set it up

4. Paste the code into your page.

2.4 Using XSPF Web Music Player

The good thing about this music player is that it works with a cookie The cookie remembers what you were listening when you changed page and goes on playing from there on the next page.

1. Click here to download the XSPF Source files and you will get a folder called “XSPFSource”

2. In the folder you will see a file called playlist.xspf

3. Open the file in a full-TextEditor or HTML Editor and you will find a page looking like this:

For each song there’s the following code:

<track>

<location>http://yourdomain.com/music/song1.mp3</location>

<annotation>Song 1</annotation>

<image>http://yourdomain.com/music/song1-cover.jpg</image>

</track>

Under location you need to enter the URL of the MP3 file to play

Under annotation you need to enter the title of the song

Under image you need to enter the URL of the album cover (or image) to display while the song is playing.

Of course you can have more than two songs in the player, simply add more codes for the song.

If you have multiple playlists duplicate the the playlist.xspf file and rename the copy with playlist1.xspf, playlist2.xspf and so on...

4. Once you edited the playlist.xspf file upload the “XSPFSource” folder to the root of your server.

5. Where you want the player to display add the following code:

<object

  type="application/x-shockwave-flash"

  width="400" height="170"

  data="http://yourdomain.com/XSPFSource/xspf_player.swf?playlist_url=http://yourdomain.com/XSPFSource/playlist.xspf&autoresume=1&autoplay=1">

<param

  name="movie"

  value="http://yourdomain.com/XSPFSource/xspf_player.swf?playlist_url=http://yourdomain.com/XSPFSource/playlist.xspf&autoresume=1&autoplay=1" />

</object>

Change the parameters height and width (in pixel) to fit your case

Substitute yourdomain.com with your domain

autoplay=1 means that it will start playing automatically, if you don’t want it to start playing automatically set autoplay=0

autoresume=1 means that it will be resuming from where it stopped playing when you changed page. If you don’t want that to happen set autoresume=0

If you have multiple playlists substitute playlist.xspf in the code with playlist1.xspf and so on...

You find a working-example of this player on my WordPress-Demo site here.

2.5 The best music player

More info about this player here.

2.6 Note about compilations

Alternative 1 doesn’t support playlists so if you want to have multiple songs playing without having people to select them manually you could make a compilation out of multiple songs resulting in a single track.

To do that use Audacity, iMovie ’06, GarageBand or any other application which can be used for that.

Chapter 3: How to insert a Flashplayer into a page

Insert the code you got in Chapter 2 in an html snippet on the page you would like to add the player to. If you want to have a popup window go on reading Chapter 4.

1. 
   

   
   

   
   

Chapter 4: How to create a popup window for the music

1. In iWeb create a page as of my Pop-up windows and pages FAQ

2. Once you create the page add an HTML Snippet to the page and paste your player-code into it. Write some text like "Keep this window in background while visiting our website" for people to keep it going while visiting the site.

3. Add the code to open the popup window to your site as described on the page and you’re done.

Chapter 5: Using QuickTime player

First let me say that you can't have a playlist using quicktime

Second let me say that there are a lot of PC users who don't have Quicktime plugin installed on their machines so they will not be able to play the music. That’s why I wouldn’t recommend to use it.

The only thing that changes if you want to use Quicktime Player is that you have to drag&drop your mp3 file to the page instead of inserting the html snippet Flash Player html code and make it Autoplay in the Quicktime section of the Inspector.

Nevertheless you may want to think about adding your music in a Flash Player just to protect a bit better your files from downloading if you don't want people to download them. It's very easy to download music even from a Flash Player too but less than from a quicktime player because you have to know the 'how to' (which I'm not gonna tell you here!).

Chapter 7: About iTunes music

Buying music on iTunes doesn’t give you the right to share it. If you buy a DRM free song on iTunes your e-mail address (thus your account information) gets registered in the file. If you share with your friends whom share it with other whom share it with others again your account information could be found all over the world and the music labels might notice that there are a lot of copies of the song with your account information and you could get a phone call by a lawyer which (obviously) wouldn’t be nice. For more information read the following article.

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -

1.