How to Add Audio to Web Pages
Add audio to a website to create a multimedia experience. Adding audio to a page is a popular method of increasing promotion for musicians and bands. Music can add ambiance and interest to a website, but can also increase load time. A web host for both the site and the song will be necessary. Once the song is uploaded, it will be possible to embed the file in many forms on the Internet using simple HTML.
Other People Are Reading
Things You'll Need
- Digital music files
- Audio conversion software
- Text editing software or web design software
- A web host
Instructions
-
-
1
Find a suitable song to display on the website, or a series of songs if making a page for a musician. Create a loop if the song will be used as ambient background music; otherwise choose a smaller file format such as MP3.
-
2
Make snippets of songs using a sound editor to lower the load time.
-
-
3
Title the song so that it is one word in all lowercase letters, otherwise it will not embed properly onto the website. Decide where in the directory the song will be placed and make a note of it to simplify the coding process.
-
4
Decide where the media player will be placed within the website. Locate the appropriate section in the source code using a text editor or web design program such as Adobe Dreamweaver. Style the media player using a CSS style sheet or using HTML.
-
5
Write the initial code to display the media player:
<embed src="file name.mp3" autostart="true" loop="false" width="350" height="200"> will create a media player that is 350 pixels wide by 200 pixels tall. It will not loop and will begin playing automatically.
-
6
Adjust the settings use "true" and "false" declarations in the code. Increase or decrease the size of the media player using the width and height parameters. "filename.mp3" will need to be changed to match the directory route for the song file.
-
7
Test the code across a variety of web browsers to ensure that anyone visiting the site will be able to hear the song. Browser compatibility tests are standard for most web design processes.
-
8
Upload the music file to a web host using an FTP client or a web-based uploading application. Move the music file into the appropriate location of the directory. Change the source code if needed.
-
9
Upload the completed source code of the website to the web host and refresh the server's cache so that recent changes will be visible to returning visitors.
-
10
Test the site once it is live. Make sure the song plays and follows the parameters of the code. Adjust the height, width and playback attributes in the code if needed.
-
1
Tips & Warnings
Use the completed embed code to place the audio file anywhere HTML is supported.
References
- Photo Credit computer speakers image by sarit saliman from Fotolia.com
