So let’s do it with HTML5, which can play sound through its audio element (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). To get as much browser support as we can, we’ll do it like this with both an MP3 source (WebKit and IE) and an OGG source (Firefox and Opera). To toggle sound like this, a HTML5 audio element is embedded in the HTML document, and not displayed on screen. Every time the button element is clicked, the toggleSound function will be executed. The toggleSound function checks if the audio element is paused. If the audio element is paused, call play to play sound.

Html Play Audio On Image Click Download
Html Play Audio On Image Click
Html Play Audio On Image Click Check
Html Play Audio On Image Click Test

Linking to a sound file using a href allows a browser to open and play an audio file if the viewer of your web page has properly configured their Internet browser. You can also use the <embed> tag or the newer <audio> tag to insert a sound file directly into a web page.

Tip

Simple HTML5 video tag/player generator With the introduction of the video tag in HTML5 you can easily add a video player to your website and play about any video file you want. There are a few attributes that you can set to customize the player behavior and you have a pretty good browser support too.
You see a sound icon on the slide. A dialog box asks you if you want to play the sound automatically or when you click the icon. If you want control over when the sound plays, you choose to click. There’s another way to play a sound — by passing the mouse over the icon. Follow the previous instructions to insert the sound.

With audio files, we recommend using the .MP3 file format because of its wide acceptance on the Internet, and is utilized by all browsers and operating systems.

<a href> tag

Example code

Result

<audio> tag

The <audio> tag can create a media player as part of the web page. It allows the visitor to play, stop, pause, or download an audio file. The <audio> element is compatible with all modern web browsers.

Example code

Result

<embed> tag

An older method of including audio files is to use the <embed> tag. While this method certainly works, it is less efficient than those which were mentioned above. As such, we recommend using one of the solutions demonstrated above.

Additional information

See our sound definition for further information and related links.

Introduced with HTML5, the <audio> tag defines a sound and is used to embed audio content such as music or other streams in HTML documents.

As of 2020, <audio> is widely supported among modern browsers. Internet Explorer 8 doesn’t support it, as well as earlier versions.

<audio> can be used to play sound files in the following formats:

.mp3: Supported by all modern browsers.
.wav: Not supported by Internet Explorer.
.ogg: Not supported by Internet Explorer and Safari.

Using <audio> to Insert an Audio Element on Your Website

Here is the most basic use of the HTML <audio> tag: On this example it loads a .mp3 file from your webserver and plays it.

Notice the autoplay attribute which is used to play audio files automatically. That being said, playing sounds automatically on a web page should be avoided as this is extremely annoying for your visitors, who have no way of stoping the sound playback.

Loop an Audio File

Html Play Audio On Image Click Download

If you want an audio file to play over and over again, you can add the loop attribute to your audio element.

Display Browser Controls

Instead of playing sounds automatically, it is possible to let the browser display controls such as volume, play/pause, etc to the user.

This can be done easily, simply by adding the controls attribute to the tag.

Multiple File Formats

<audio> lets you specify different formats of a same audio file. This is especially useful if you wish to play a file in .ogg format, which is not supported by both Internet Explorer and Safari.

Specify MIME Types

When using different file formats, it is a good practice to specify the MIME type of each file in order to help the browser localize the file it supports.

It can be done easily, using the type attribute on the source element.

Fallback For Old Browsers

All modern browsers support <audio>. It is however possible to notify people who are using outdated browsers that the <audio> tag isn’t supported.

As shown below, you can simply embed any message of your choice within the <audio> tag. If the visitor’s browser doesn’t support HTML audio, a message will be displayed instead of the audio player.

Buffer Files

When playing large files, it is a good idea to buffer those files in order to provide visitors a smooth listening experience.

To do so, you can use the preload attribute. It accept 3 values: none (If you don’t want the file to be buffered), auto (If you want the browser to buffer the file, and metadata (To buffer only metadata when page loads).

Control HTML5 <audio> with JavaScript

Controling a HTML audio player with JavaScript is pretty easy. The following example shows how you can build a rudimentary audio player with basic controls (Play, Pause, Volume Up, Volume Down) using HTML and JavaScript.

Styling the HTML Audio Tag Using CSS

As of 2019, CSS styling options for the HTML audio tag are quite limited. The CSS properties that can be used are: width, box-shadow, border-radius and transform.

You can experiment with the small demo that I’ve created on CodePen, or just have an overview of the possibilities by having a look at the code below.

If you are looking to create your own HTML audio player, the best option would be to leave off the control attribute and implement your own controls using JavaScript.

Advanced Audio Player Using MediaElement.js

As shown above, CSS styling options for <audio> are very limited. Fortunately, an amazing open-source media framework named MediaElement.js allows you to have much more control on your audio elements.

Html Play Audio On Image Click

The above example showcases how MediaElement.js allows developers to easily give a custom look and feel to their HTML audio players. You can view this example live here.

If you are looking to build custom audio (or video) players, MediaElement.js is definitely a tool to consider.

Frequently Asked Questions

What Is Audio Tag In HTML?

Html Play Audio On Image Click Check

The HTML audio tag (<audio>) has been introduced in HTML5, and represents an audi