How to add audio in HTML
Well, sometimes, you might need to put some audio on your web page, or you might have seen audio on some websites and might be wondering how did they do this. We are now going to discuss the same thing. Adding audio to our web page is pretty easy. Have a look at the below example –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<audio src=”sound.mp3″ controls>Audio element not supported in Browser.</audio>
</body>
</html>
We are using the audio element here. With the help of the src attribute, we are specifying the path of the audio file to be embedded. This is an optional attribute. Instead, you can also use the source element within the audio block to do the same thing. Have a look at the below example to get an idea of the same –
The output for both the above examples is something like this –
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Some heading here…</title>
</head>
<body>
<audio>
<source src=”sound.mp3″ type=”audio/mpeg”>
Audio element not supported on the browser.
</audio>
</body>
</html>
With the help of the control attribute in the audio element in both examples, these controls are made available to the user, like the volume, seek, pause, and play audio control options. Try to remove the controls attribute, and observe the changes.
Also, whatever text is written within the audio element, is only visible if the audio element is not supported in the browser.
