Music and audio

How can I add music to my WordPress created website? What about Flash players? How can I have it to go on playing no matter what page the visitors are looking at?

That’s what this FAQ is about:

For this page you will need the Raw HTML plugin.
Visit the Plugins FAQ for more informations.

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.

CHAPTER 1: How to get the music 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 The best music player
2.5 Note about compilations
Chapter 3: How to insert a Flashplayer into a page
Chapter 4: How to have people listening to the music no matter what page they’re on
Note: about auto-popup windows
Chapter 5: Note about iTunes music

CHAPTER 1: How to get the music online

1. Search for the music you want to play

2. Download it and put all of the songs in a folder
(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)

4. Upload the folder containing your mp3′s to the main location (root) 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.com

1. Sign up to 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 http://yoururl/Music/filename.mp3 or whatever)

3. At the end save the playlist and get the code and paste into your page

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 The best music player

More info about this player here.

2.5 Note about compilations

The simple flash player doesn’t support playlists. If you want to put multiple songs in it make a compilation of multiple files and save it into one file.

Chapter 3: How to insert a Flashplayer into a page

Insert the code you got in Chapter 2 in the page where you would like to add the player to.
In the case of Chapter 2.4 paste the code on all pages you would like to have it autoresuming if playing.

Chapter 4: How to have people listening to the music no matter what page they’re on

Either use the player of Chapter 2.4 or use popup windows. What follows here is how to use popup windows.

When a visitor clicks on a link or an image a popup window opens which contains the player. The visitor then keeps the popup window behind the main window while browsing your site. This way no matter what page he’s visiting the visitor can listen to your music without any interruptions.

1.To build the page that pops up containing the music player use any HTML editor or full text editor.

If you want you can click here to download a file called Music.html which already contains some informations and makes it easier for you to create that page. Simply download it and open it with any HTML editor or Text editor. Where you see “Paste your player’s code here” paste the code of your flash player instead and where you see “Write a short description here” you can add a few lines of text if you want. Once you modified the file upload it to the root (main location) on your server and its URL will be yourdomain.com/Music.html

2. Copy and paste the following code to the page where you want the “Click here to listen to music” link which will open the popup window to appear

<div align="center">
<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′);return(false)">TextToDisplay</A>
</div>

3. Where it says page.html put the url of the page you want to point it to, the page containing the Music player.
Where it says width and height you can decide how big the popup window has to be (should be about as big as the player, read width and height in the player code)
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).
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.

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">
<A HREF="#" onClick="window.open(‘http://alaskadream.org/music/Music.html’,'_blank’,'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=295, height=600′);return(false)">Click Here</A>
</div>

Here’s an example using popup.

or

Note: With the previously described method people will have to click to open the player and music start playing. There’s a code that actually opens the popup window automatically when someone is visiting a page. The problem is: Most browsers will block it due to security reasons. Most people 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. 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. Bottom line: it’s not recommended, thus I will not provide it here.

Chapter 5: Note 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.



WordPressFAQ.org – Tutorials, Tips & Tricks is made with and for WordPress.
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 -
  • Share/Bookmark
This entry was posted in Uncategorized. Bookmark the permalink.

Comments are closed.