How to Add Music to a Web Page
Embedding music has become very easy over recent years, especially with the option of third party hosting options where you don't have to worry about having your own web space. Most of them are even free to upload to, if you're only using them casually.
First decide between hosting your own file and using HTML, Javascript, Flash and uploading to a third party website like BandCamp or SoundCloud. Here's a quick table comparing your options.
HTML Code
| Third Party Website
| Javascript and Flash
| |
|---|---|---|---|
Fully Customizable
| yes
| no
| yes
|
Webspace
| uses your web space
| uses their space
| use your space
|
Cost
| included in most web hosting plans
| free - up to a certain point, depending on site
| depends on player
|
Difficulty
| medium
| easy
| medium-hard
|
HTML Music Player
If you have your own website and can easily upload your own track to your site, this option is great for customizing and avoiding any third party plugins or embed codes to clutter your site.
This will use your own webspace to host the file, however you have full control over the size and how it plays. There's not much security with this option as anyone who can read your HTML could easily find the path to your music track.
To use this code, all you need to do is copy and paste it and change a few values.
HTML Code for Music on Webpage
<object width="xxx" height="xx"> <param name="src" value="yoursoundfile.mp3"> <param name="autoplay" value="false"> <param name="controller" value="true"> <param name="bgcolor" value="#ffffff"> <embed src="yoursoundfile.mp3" autostart="false" loop="false" width="xx" height="xxx" controller="true" bgcolor="#ffffff"></embed> </object>
HTML Color Codes Chart
http://www.immigration-usa.com/html_colors.html
You can also use an image editing software like Photoshop, GIMP or Paint Shop Pro to find a specific color. Usually you can find this by selecting a color with the eyedropper or opening up the color selection palette.
How to Customize It
- First decide what size you want your player to do be and edit both the width and height on lines 1 and 6. Replace the "xxx"s and "xx"s with your chosen value. A good starting point is 100 for width and 50 for height.
- Change the yoursoundfile.mp3 to the location of your audio file. You'll have to upload your music track to your server for this to work. An example would be: sound/track1.mp3. Be sure to change the location on both lines 2 and 6.
- If you want your track to automatically play, change "false" to "true" on line 3 and 6.
- You can change the area around the player by changing the hex decimal (#ffffff), which is currently set to white on line 5.
Professional Tip
|
|---|
Avoid using the autoplay function when embedding music files. A lot the time people have their own music playing while browsing. Don't annoy your visitors by having music play automatically and then make them hunt down the switch to turn it off!
|
Third Party Embedding Options
This is probably one of the easiest ways to add music to your webpage. You don't have to worry about using your webspace or bandwidth, however you are often limited to how the player will look, depending on how the website displays their music player on your site.
A couple of the more popular sound hosting websites are:
Free Sound Project - more for sound effects and loops, based on Creative Commons licensing, community based.
Band Camp - more of a professional platform for bands wanting to sell their music.
Sound Cloud - A mix between the two, but more community based than Bandcamp.
Of course there are many, many other options out there, these are just three of the ones that I've personally had experience with.
Embedding Music Onto Your Page
After you have your music, song or sound effect on your chosen website of choice, getting the embed code is usually very simple and comes with different options to help you customize and fit it into the space you want it to go.
- Upload your music onto a third party website like Sound Cloud.
- Once uploaded, go to your music track's page, usually you just click on the track in your profile.
- You should see a button or link that says "share". Click on this and you'll see the option to copy an embed code. Look to see if there are options such as size (width and height), color, autoplay, etc). If so, customize them to how you'd like them to appear.
- Copy the embed code after you're done customizing.
- Open your page or program and paste your embed code into the space you want it to appear.
- Check out how it looks on your webpage. If you don't like how it looks, go back and try out the other customization options.
Javascript or Flash Music Player
There are many players available, some paid and some free. When dealing with javascript there is always tweaking that needs to be done to the design to customize it and troubleshoot the code. Be sure that you're willing to put the time and effort into it.
You'll have the most options for customization and control over your music player. Some even allow you to create a music box, with multiple tracks and playlists.
Here's a short list of some of the players that are available for free. Each link will bring you to the website to download the code and give you specific instructions for installing each.
Free Javascript and Flash Music Players
SM Music Player - A good option for creating music with files from YouTube and SoundCloud. You building the music player on the website, so there's no HTML or code editing. Simply copy and paste.
Flowplayer - This one you'll have to download the files and install them on your website. This one will be more difficult to set up, but it also allows you to stream video off your website and is very versatile.
Audio Play - A very simple audio player that has a single button that is used to play the file. This one also has an online editor so you don't have to touch the coding.