Software, your way.
burger menu icon
WillMaster

WillMasterBlog > HTML

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Audio on Your Website

The HTML audio tag is simple to implement. And, it is simple for your site visitors to use.

As examples, sound may be put on web pages to entertain, educate, or demonstrate. It may be a song, a sales message, or the sound something makes when it is used.

Here is an illustration with a short composition using a classical guitar:

("Ambient Classical Guitar" is a royalty-free composition by William King, a composer and musician from Ukraine.)

And here is the source code for the above illustration:

<audio controls src="https://www.willmaster.com/possibilities/demo/ambient-classical-guitar-144998.mp3">
</audio>

The audio tag needs two attributes, the controls attribute and the src attribute.

In the above code, you'll see the controls attribute. It must be there or the audio tag won't display the audio controls. On some browsers, perhaps most, you won't see an audio player at all when that attribute is missing.

You also see the src attribute, its value being the URL to the audio file. The URL must, of course, be a valid audio file that the browser can understand. Virtually all browsers can use *.mp3 files.

That is the extent of the implementation.

The latest versions of popular browsers will also play interent radio. To implement radio, swap the URL to the *.mp3 file with the URL to the internet radio stream.

This illustration lets you listen to the Easy Hits Florida radio stream (a classic rock stream):

<audio controls src="https://ais-edge106-live365-dal02.cdnstream.com/a80304">
</audio>

As you can see, the audio tag is simple to implement.

You can host your own sound files, whether music, talks, or other audio. You can link to sound files on the internet. And you can provide radio streams to your site visitors.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Valid File Name Characters

Most simple printable characters are valid within file names. Some are not.

Image Hue Shift

Shift the hues of an entire image with this CSS rule.

Inspecting HTML Tags

Software to inspect meta and link tags that might have changed after the web page was loaded.

Linked Images in Facebook

Post a URL on Facebook. Facebook pulls in an image and links to that URL. (Probably similar on other social media sites.)

Real Download Link

A download link can tell the browser to download the file for saving on the user's hard drive — instead of displaying it in a browser window.

Characters for Hyphenation

The CSS hyphenate-character property can be used to tell the browser an alternate character or set of characters should be used where a hyphen would be inserted at end of lines.

Automatic Wrap Balancing for Headlines

Use the CSS text-wrap:balance; property to better balance the line lengths of multi-line headlines.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2025 Will Bontrager Software LLC