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:

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