<

Improve company productivity with a Business Account.Sign Up

x

Embedded Audio in HTML5

Posted on
6,071 Points
71 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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Join & Write a Comment

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month