HTML - Audio

Some time ago it was quite complicated to insert music or sounds on a web page. Now, that problem is solved, adding sounds being quite simple.

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

It is recommended that both height and width be directly proportional to avoid problems.

To hide the player the value of the hidden attribute (which is false at the moment) will be replaced by true. This thing is done if you are sure that the user does not wish to stop the sound.

Controlling and manipulating the audio player

Let's have a look at the above example:

html<embed height="60" type="audio/midi" width="144" src="audio.mp3" volume="60" loop="false" autostart="false" />

• autostart - sets whether the sound will start immediately after the web page is loaded. Can have the true or false value.
• loop - sets whether the sound will be replayed forever. Can have the true or false value.
• volume - can have any value from 1 to 100.

You can play a little with these attributes to better memorize and understand them, and also be aware that a higher volume may be annoying for the user.

HTML 5 Audio tag

With the introduction of HTML5, the audio tag has spread very quickly and it is very well supported by current browsers. The audio tag is used to add sound and music to the HTML page. At the moment the audio tag, supports 3 types of audio files:

• mp3 - MIME-type audio/mpeg
• wav - MIME-type audio/wav
• ogg - MIME-type audio/ogg

html<audio controls>
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
	<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
	Your browser does not support the audio tag.
</audio>

Demo

Here you can find a simple yet powerfull generator for the audio html5 tag