How to Add Audio to Your Website

Use the HTML <audio> tag to add audio playback to your website. It is very simple.

First, you have to add your audio file to the same project folder as your webpage files. The file must be MP3, WAV, or OGG format.

This is one possible place where you can place your audio file.

Image for post
Image for post

src is path to your clip relative to the webpage file. type attribute is the audio format of your clip. controls attribute specifies whether you want to show audio playback controls on your webpage. It is this simple to add audio clip playback to your webpage.

<!doctype html><html>
<head>
<title>Audio</title>
</head>
<body>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

The result looks like

Image for post
Image for post

That’s all there is to it. Making a website with audio playback is simpler than ever.

Image for post
Image for post

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store