<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Embedded Audio in HTML5

Posted on
6,142 Points
142 Views
Last Modified:
Experience Level: Beginner
4:02
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
Comment
0 Comments

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Join & Write a Comment

Suggested Videos

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Next Video:

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month