Embedded Audio in HTML5

Posted on 2014-08-14

HTML

6,183 Points

0 Comments

183 Views

Last Modified: 2014-08-26

Published

Experience Level: Beginner

4:00

Sarah delos Santos

Follow

In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5.

Video Steps

1. Ensure your DOCTYPE declaration is set to HTML5:

The declaration should display

<!DOCTYPE html>

Open in new window

HTML5 is supported by the most recent versions of all major browsers.

2. Begin your audio tag and define the source of the audio file

The source should reference your audio file's URL inside the single quotation (similar to the <img> tag's src). Complete the tag using a closing audio tag.

<audio src="Audio.mp3">
</audio>

Open in new window

3. Include the player controls if desired

Controls are helpful since they allow visitors to pause and adjust volume on your player. Type "controls" within your opening audio tag after your source file to include them.

4. Add additional properties you'd like the player to have

To loop the audio on the page, type "loop" after the source within the opening tag.
To have the audio autoplay as soon as the page loads, type "autoplay" after the source within the opening tag.

5. Include a message for visitors whose browsers do not support HTML 5.

The message (or image) you use is inserted between the <audio> and </audio> tags

0

Author:Sarah delos Santos

Title	Views	Activity
Box Shadow Effect in CSS	149	2022-03-01
Lists and Links	106	2022-03-02
Flexible Layouts	73	2022-04-22
How to set up a global email signature in Office 365 and add it only to new emails	2,190	4d