Embedding songs into a website, and adding links for songs

This tutorial tells you how to embed a song or sound into a website so when you open the page, the song starts playing. This can be annoying, so we are adding audio controls so the music can be stopped.
It also shows you how to put links in to play a song. When clicked, the music file will open and start playing in a new window.

What you will need:
The website (working properly) you want to embed music or add links to.
The music files.*
About 15-20 minutes is all it takes to complete this.
*I SUGGEST .mp3, .wav, or .midi. Mp4 and .aac don’t work.

Steps:
(these are specific for the example site)

1: Open your HTML document in WordPad or NotePad or similar text editor.

2: Open your root folder, make a new folder inside it for music-sounds.

3: Find your music files and copy them to the music-sounds folder just created within the root folder

4: Now back to the HTML document: we will now embed a song that will start playing as soon as the website is loaded. I aligned the audio controls to the right, by doing the following:

5: Now you add the embed code within the alignment (screen capture shown):

Embed src=”…” this is the music file
Autostart=”…” true means it will start when page is loaded
Height=”…” this is the height ratio of the audio controls

6: Next we’ll add links for songs: start with a link tag:


Target=”_blank” this tells the browser to open this file to play in a new window
>….. the label of your link/song/music goes here

8: Now, SAVE!!!

9: Open in a browser window and make sure its all working!!
Here’s what it looks like in Safari, and Firefox is similar.

 The first image above is of the home page, the second is of a link open in the Safari on a Mac, the third is the link open in Safari on a PC


URL for working example page:

http://www.fall10.graphicinterfacedesign.com/students/bwestfal/tutorial/soundtutuorial/

In conclusion, its very simple to add music and sounds to your websites!

Brittney Bassett, Brittney.bassett@gmail.com