HTML5 introduced new features, specifications, and elements. One of the stated goals for the W3 Consortium with these new specs was to address ‘multimedia’ in order to “make video and audio first-class citizens in the Open Web.”
From this work came two new elements, the <video> and <audio> elements. As their names imply these elements are intended to provide multimedia functionality to webpages.
The <audio> element allows developers to add an audio player to webpages.
The <audio> element accepts a number of specific and unique attributes.
As with other HTML elements, the <audio> element takes a src="" attribute, which accepts a URL (relative or absolute) to the audio file.
The controls attribute is passed alone and does not require a trailing value. This attribute indicates whether the player should display controls. If you do not use this attribute, no controls will be shown by default.
Like the controls attribute, the autoplay attribute is included as a single word or not at all. When present, this attribute tells the browser to start playing the file on load.
NOTE: This is considered poor-practice, and in most cases, it is better to let the user choose whether to start the audio or not.
The preload attribute takes one of three values and tells the browser how to load the audio file if autoplay is not present.
preload="none" tells the browser to do nothing until told to do so by the user.preload="auto" tells the browser to download the audio file when the page loads.preload="metadata" tells the browser to only collect metadata, such as size and length.The loop attribute, when present, tells the browser to loop the file.
As with image files, you are encouraged to store multi-media files in a separate sub-directory so as to keep the directory structure of your site clean.
The following demonstrates a possible directory structure;
your-site/
├── index.html
├── imgs/
│ ├── img1.png
│ └── img2.png
└── media/
├── audio1.mp3
├── audio1.ogg
├── audio2.mp3
└── video1.mp4
Notice that the <audio> element is not an “empty element” and requires both an opening and closing tag. This serves a number of purposes, but the most important is that the developer can include content between the tags that will be displayed or called in the case that an end-user’s browser does not support the <audio> element or audio file format.
You should always include extra markup inside the tags for this potential case.
<audio src="">
<p>This browser does not support our audio format.</p>
</audio>
Utilizing the above information, we can embed an audio file (michael_musick.mp3) that will load on “page load”, display controls to the user, and loop.
<audio src="./media/michael_musick.mp3" preload="auto" controls loop >
<p>This browser does not support our audio format.</p>
</audio>
There are many file formats that audio files can be rendered to. The most popular and well known is likely .mp3.
This is because the compression achieved creates smaller file sizes without comprising audio quality too greatly. However, .mp3 is technically a proprietary format, and as such, some people are hesitant to use it.
If you find yourself working for an audio-based client, they may also have strong opinions about what file types they want prioritized. For example, they may want to use .ogg as this is an open-source based audio format.
Your clients may also insist that you include lossless or uncompressed audio file formats such as .wav, .aiff, or .flac.
When using more than just .mp3 you should include multiple versions of the file, with decreasing preference. This allows the browser to then use the file format that it supports.
This can be done by omitting the src="" attribute from the <audio> element and instead using a separate <source> element inside the parent <audio> element.
The <source> element is an empty element, and accepts the src="" attribute to provide the URL to the browser.
<h2>Signal Processing Examples in MATLAB</h2>
<audio controls>
<source src="./media/MATLAB-DIDDY-3.wav" />
<source src="./media/MATLAB-DIDDY-3.flac" />
<source src="./media/MATLAB-DIDDY-3.ogg" />
<source src="./media/MATLAB-DIDDY-3.mp3" />
<p>This browser does not support our audio format.</p>
</audio>