This is what this FAQ is about: or
See how I embedded it on this page (where it says: click here first if you want to play music during the slideshow)
Please 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 http://www.jamendo.com/en/ or have a look at the following blog post at largeheartedboy.com
(If you know any other good platform sharing CC music please drop me a comment, thanks in advance)
CHAPTER LIST
Chapter 1: Inserting a Flashplayer in a popup window
Chapter 2: Inserting a Flashplayer without popup window
Chapter 3: Using quicktime player instead of a flash player (which I don't recommend)
Chapter 4: If you want to hide a player on your page have a look at this page by RoddyMcKay
CHAPTER 1: FLASHPLAYER IN A POPUP WINDOW
Warning: it might seem to be a hassle and/or complicated to some of you but trust me, it isn’t, it’s very easy! Really! Try it!
Here's the how-to step by step:
Step 1: Let's start by creating the player and playlist
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 .Mac 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.mac.com/username/filename.mp3 or http://web.mac.com/username/Music/filename.mp3 or http://web.mac.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.
4. 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
5. Make a playlist
-Choose a skin you want to use (appearance of the player, I use the iPod nano because I love it)
-Then 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)
6. At the end save the playlist and get the code
Step 2: Where we create the page that will be the content of the pop-up window
1. In iWeb add a new page which later will contain the player and open as a popup
2. In the inspector under page uncheck the "Include page in navigation menu" and "Display navigation menu"
3. On the left top of the page insert an html snippet
4. Copy&Paste the code of the player you created in step1 to the snippet
That's my code (please don't copy and paste it to your website, as it may not be available forever)
<center><embed src="http://www.mp3asset.com/swf/mp3/myPod.swf?myid=5295028&path=2007/10/14&mycolor=0xFFFFFF&mycolor2=0xc0c0c0&mycolor3=0xFFFFFF&autoplay=true&rand=0&f=3&vol=100" quality="high" wmode="transparent" flashvars="" width="180" height="362"name="myflashfetish" align="middle"type="application/x-shockwave-flash"pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><div class="fetishButton"><a href="http://www.myflashfetish.com" target="_blank"><img src="http://www.myflashfetish.com/images/blank.gif" width="180" height="25" border="0" /></a></div><a href="http://www.myflashfetish.com/music-player/" target="_blank"><img src="http://www.myflashfetish.com/images/mffico.gif" title="Make your own playlist!" style="border-style:none;" alt="music player"></a><br />I made this <a href="http://www.myflashfetish.com/playlist/5295028" target="_blank">music player</a> at <a href="http://www.myflashfetish.com" target="_blank">MyFlashFetish</a>.com.<br></center>
5. In the Inspector=>Page=>Layout=>reduce Content width and Content height so it fits your player (see red numbers in my code example, this are the dimensions of my player, you will find them in your code too so approximately that's what you should put in those fields, unless you add some text like "Keep this window in background while visiting our website" and so on, then you will have to add them to the height). Make sure that after you put the size of Content the player still fully shows up.
Step 3: Making a popup so that people can keep the player going on in the background while they visit your website (for auto-popup read the note at the end of the chapter)
1. Copy and paste the following code in an html snippet insert in the page where you want the "Click here to listen to music" link to appear
<div align="center">
<SPAN STYLE="font-family: Times New Roman; font-size: 12pt">
<style type="text/css">
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #0000FF;
text-decoration: none;
}
a:visit {
color: #FF00FF;
text-decoration: underline;
}
</style>
<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200'),self.moveTo(0,0);return(false)">TextToDisplay</A>
</div>
2. Where it says page.html put the url of the page you want to point it to, the page containing the Music player (we created this page in Step 2).
if you're publishing to .Mac the url of the page created in Step 2 is:
http://web.mac.com/username/sitename/nameofthepagecreatedinstep3.html
if publishing to folder:
http://yourbaseurl.com/sitename/nameofthefilecreatedinstep3.html
Where it says width and height you can decide how big the popup window has to be. Set it the same as you put height and width in the Music player window we created in Step 2.5
Where it says TextToDisplay put Click here to listen to music. Or whatever you like to be displayed.
If you want to have an image displaying instead of the text for the links simply replace the text with:
<img src="urloftheimage">
urloftheimage: Put all the images you want to use for menus in a folder on your desktop. Upload the folder containing your images to your server (example: create a Folder named MenuImages.
-For .Mac 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 MenuImages folder into the Sites folder.
Entering: http://web.mac.com/username/MenuImages/filename.jpg 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/MenuImages/filename.jpg in your browser should bring up this file.
3. Click Apply and you will see a link appearing in the html snippet with the text you chose to display as TextToDisplay or the image
That's how my code looks after I changed the four things to change (page.html, width, height, TextToDisplay)
<div align="center">
<SPAN STYLE="font-family: Times New Roman; font-size: 12pt">
<style type="text/css">
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #0000FF;
text-decoration: none;
}
a:visit {
color: #FF00FF;
text-decoration: underline;
}
</style>
<A HREF="#" onClick="window.open('http://www.alyeska.altervista.org/Music.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=295, height=530'),self.moveTo(0,0);return(false)">Click here</A>
</div>
4. To customize the appearance (the look) of the link please have a look at “Customizing the links” in the iFrame FAQ.
Step 4: You're done.
Note: With the previously described method however people will have to click to open the player and music start playing. There's a code who actually opens the popup window automatically when someone is visiting a page. The problem is: Some browsers will block it due to security reasons. And if you put the code to every single page I guess a window will pop up on every single page a user looks at.
Code for Auto-Popup to insert in an HTML Snippet on the page you want the popup to happen:
<body onload="open('UrlOfPageToOpenInPopup','Name','width=500,height=500');" >
Change width and height with the values of Step 2.5. Replace UrlOfPageToOpenInPopup with the url of the page you would like to have to popup. Also note that some people might have “Block auto-popup windows” enabled in their browsers. The window will not popup for them. They just get notified that the browser blocked a popup and can then chose to allow it. So you might have both auto-popup and link-popup.
CHAPTER 2: WITHOUT A POP UP WINDOW
Follow Step 1 and 2 of Chapter 1. The only thing changing is that you don’t have to create a page for the player, you just insert the code in an html snippet on the page you would like to add the player to. And this will be the result:
-
CHAPTER 3: ABOUT QUICKTIME
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. Keep that in mind and follow the steps two and three of Chapter 1.
Nevertheless you might 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 here!).
NOTE: 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.
We would like you to give us feedback on this page by commenting here. Tell us if it was helpful. If it wasn’t tell us why. If you think something is missing tell us what.
If you have a question please make sure it is relevant to the content of the page. Look through our FAQs and look where it fits best. If you can't find any FAQ on the topic post on the main page of our FAQs. Please do not post your question to the main page if there's a relevant FAQ. However we recommend you to post questions to the AppleDiscussionForum for iWeb.
Thank you.
