HTML Music Codes

Inserting music onto a web page is relatively easy. In the past multiple tags had to be used because browsers did not have a uniform standard for defining embedded media files. However, I am glad to announce that this is a problem of the past and you will have a much easier time then webmasters of the past.

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 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.

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 - if this value is true then 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. (Values are true/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.

Embed Attributes - Related to Functionality

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

• autostart - choose if the media file will start automatically
• loop - sets the media file to repeat or not
• volume - set the volume of the media file. The range is 0-100.

HTML Code:

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

Customize Your Code:

Controls Attribute

The attribute controls sets which controls for the media player will be displayed.

• autostart - choose if the media file will start automatically
• loop - sets the media file to repeat or not
• volume - set the volume of the media file. The range is 0-100.

Posted in: HyperText MarkUp Language