Add MP3 Files To Websites

HTML supports two methods of sharing your MP3 with your site visitors

Woman using computer
Add MP3 Files to Your Website. Morsa Images / Getty Images

The HTML5 standard supports two different mechanisms for presenting audio files. Either link an MP3, making it available for download, or embed it such that people may enjoy the music from an on-page audio player.

Audio Availability

winscp to upload files

The MP3 file must be accessible on the internet before a link or an embedded object succeeds. If the MP3 is already online, copy the direct URL to the file. This URL must be to the media asset; it can't be to the page that the asset's associated with.

With your own MP3s, you must use a tool to upload the file from your computer to an internet file server. Most people use FTP, SFTP, or SSH to upload the MP3 to their website, although if your site uses a content management system like WordPress, the CMS supports a point-and-click upload utility.

Adding the MP3 to Your Web Page

With a URL in hand, you're ready to add the MP3 to your site. If your page-creation tool supports a point-and-click interface, use that—because each is different, consult your CMS documentation for specific procedures.

Regardless of your GUI, manual edits to the HTML always work, consistently.

Creating a Link

A link that opens the media file in a new tab or downloads it to a visitor's computer relies on a standard anchor tag. The HTML element therefore consists of the anchor tags, the URL of the MP3, the text that activates the hyperlink, and optional parameters. For example, to download podcast.mp3 through a link titled Download the show!, use the following HTML element:

<a href="https://www.example.com/path-to-file/podcast.mp3" download> Download the show! </a>

This element forces a download of the MP3. To allow the MP3 to be opened, remove the download attribute at the end of the MP3 URL.

Embedding the Audio File

To use HTML5 to embed a tiny audio player, use the audio element. Because some browsers do not support it, any text included in the element displays if the browser cannot display an audio player.

<audio controls>
<source src="https://www.example.com/path-to-file/podcast.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

The audio element includes several standard attributes:

  • Autoplay: If specified in the tag, the audio plays as soon as its loaded and ready, regardless of visitor interaction with the embedded audio player.
  • Controls: Displays basic controls, including a play/pause button and a download link.
  • Loop: When specified, loop continuously replays the audio.
  • Muted: Mutes the audio output.