How to create a link to play a sound file in HTML

With HTML (HyperText Markup Language), linking 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. Alternatively, use the <embed> tag or the newer <audio> tag to insert a sound file directly in a web page. In these examples an audio file is a sound effects file, music, or other audio.

<a href> tag

Example code

<a href="https://www.computerhope.com/jargon/m/example.mp3">Play sound file</a>

Result

Play sound file

<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

<audio controls>
  <source src="https://www.computerhope.com/jargon/m/example.mp3" />
</audio>

Result

Play audio file with JavaScript

Using JavaScript, you can create an audio file that plays an MP3 without opening a new window or tab. In this example, we're also using an image of a play button instead of text. This image could be replaced with any other picture or removed and placed with text depending on how you want your audio link to appear.

Example code

<!-- Image acting as a play button -->
<img src="https://www.computerhope.com/issues/pictures/powerpoint-play-button.jpg" alt="Play Music" id="playButton" style="cursor: pointer;">
<!-- Audio element (hidden) -->
<audio id="audioPlayer">
<source src="https://www.computerhope.com/jargon/m/example.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
// Select image and audio elements
const playButton = document.getElementById("playButton");
const audioPlayer = document.getElementById("audioPlayer");
// Toggle play/pause when clicking the image
playButton.addEventListener("click", function() {
 if (audioPlayer.paused) {
  audioPlayer.play();
 } else {
  audioPlayer.pause();
 }
});
</script>

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.

<embed src="https://www.computerhope.com/cdn/clouds.mid" 
       align="baseline" border="0" width="145" 
       height="60" autostart="false" loop="true">

Upload audio

If you're hosting the audio file on your server, it must also be uploaded to your server. For example, if the audio file you're using is an MP3 file, you'd need to upload the MP3 file to your server. Like your HTML pages the audio file can be uploaded using FTP (File Transfer Protocol) and is treated like all other files.

If you copied any of the code in the above examples realize that the source is pointing to the Computer Hope server. To get these files on your server, the audio file must be downloaded, uploaded to your server, and then change the src link should to your server path.

To make things easier, we've including links to each of the above audio files below. Right-click and save these files to your computer, to use these files.

• Example.mp3
• Clouds.mid