html - music codes

Inserting music onto a web page is relatively easy these days. In the past, multiple tags had to be used because browsers did not have a uniform standard for embedded media files. However, we're happy to announce that this is a problem of the past, and you will now have a much easier time than webmasters of the past.





Advertise on Tizag.com

html - embed

Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file's location.


HTML Embed Tag Code:
<embed src="beethoven.mid" />

<p>Above is an embedded media player.  To stop the music press stop/pause.</p>



Depending on what kind of media software you or your visitor has installed, the above example will appear slightly different. To make your embedded player display properly, change the attributes associated with display.

html - embed attributes - related to display

To customize the appearance of the embedded media player, be sure to set the following attributes.

width - The width of the media player.
height - The height of the media player.
hidden - Determines if the media player is visible. If this value is set to "true", the media player will not be displayed. We recommend using this attribute only if you know that your visitors will not want the option to stop the music that is playing on your web page (The values are "true" or "false").



HTML Code:
<embed src="beethoven.mid" width="360" height="165" />



Embedded Music:



Usually, you do not want to mess with the width and height of the media player, as it can cause the media player to look rather distorted.

html - embed attributes - related to functionality

To customize the functionality of the embedded media player, be sure to set the following attributes.

autostart - Allows media player to start automaticcaly (values are "true" and "false")
loop - Sets whether or not the media file will repeat (values are "true" and "false")
volume - Sets the volume of the media file (values range from "0" to "100")



HTML Code:
<embed src="beethoven.mid" autostart="false" loop="false"
volume="60" />



Customize Your Code:







Go Back
Continue


tips

Be careful when placing music on your website. If done poorly, users will be annoyed by the music and will leave.
Only set the hidden attribute if you are certain your visitors will not want to stop the music.
If you want your music to play over and over again, be sure to set the loop attribute to "true".


found something wrong in this lesson?

Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

Read More