How to add a music player to your website
Step 1 - Choose a music host
Ask yourself what kind of music do you want to add to your site? Other people's music or your own compositions?
Some services allow you to upload your own music and let users listen to it (Soundcloud, etc.), others let you create a playlist of hit songs. This is a matter of copyright: in most countries, there are guidelines as to how you can use other people's music.
Some examples of external music hosts:
- SoundCloud (easy to use and embed)
- Tindeck (player somewhat difficult to resize)
- BandCamp (you can also sell your music online)
- 8Tracks (only works for music mixes)
- Grooveshark (not available everywhere)
Step 2 - Upload your music
Every music service is a bit different: some ask you to register first, others let you start uploading music or creating playlists without signing up.
Step 3 - Get the embed code
SoundCloud: Click on Share, then on Embed Code.
Tin Deck: Click on Get Embed / Link Code, then copy the code for Embedded Player.
8Tracks: Click on Share, then on Embed. Copy the embed code.
Step 4 - Paste the code unto a Widget/HTML element
Now that you've grabbed the code, head back to your website and log in. Go to the page where you want your music player to appear. Add a new Widget / HTML element and paste in the code.
If you want music to appear on every page, add a Widget/HTML element to the sidebar.
Step 5 - Change the player size
Look closely at the embed code after you paste it in: see the part about "width" and "height"? Sometimes there are just numbers (as in the example on the left - these indicate number of pixels), other times there are percentages (i.e., 100%).
Change these to adapt a player to the size you need. This is especially important if you put a music player in the sidebar.