LAMP Tutorials
Lamp Tutorials Contact CrackFeed

Using HTML5 to embed music

Authored on: August 3, 2011 by Jeffery Dilegge

Digg this tutorial!

Please support Crackfeed with a small donation.

Back to HTML5 Tutorials




It used to be that one had to use javascript and third party plugins to play audio files within a webpage. With the new

How to embed music into webpages using HTML5

This example tells the browsers 2 different audio formats. So the browser will choose the first audio format that it can work with. I also included the attribute "controls" that will display the audio player controls (Play, Pause and so on.) When listing more than one file type, it is best practice to include the type attribute, which tells the mime type of the file.

<audio controls="controls">
  <source src="song.ogg" type="video/ogg" />
  <source src="song.mp3" type="video/mp4" />
  Your browser does not support the audio tag.
</audio>

HTML5 video element attributes chart

Attribute Value Example
 
Audio muted audio="muted"
 
Autoplay autoplay autoplay="autoplay"
 
Controls controls controls="controls"
Loop loop loop="loop"
 
Preload preload preload="preload"
 
Src url to video file src="http://mysite.com/video.avi"
Type define the mime type type="audio/mp3"

Links Directory | Jeffery Dilegge