Audio Embedding

Embedding audio elements in a webpage allows you to deliver rich media experiences to users. HTML5 made it easy to include audio files directly in a webpage without relying on third-party plugins. The audio element provides an intuitive way to add sound or music to your site, and in this chapter, we’ll cover everything you need to know about embedding audio in HTML from basic to advanced usage.

Audio Embedding

Before HTML5, embedding audio files required third-party plugins like Flash. However, HTML5 introduced the <audio> tag, making it easy to embed audio files that can be played directly within the browser.

Example

				
					<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

This example includes:

  • The <audio> tag which is used to embed audio.
  • The controls attribute to provide play, pause, and volume controls.
  • The <source> tag, which specifies the audio file and its format (MIME type).
  • A fallback message in case the browser does not support the audio tag.

Basic Syntax of the audio Elements

The <audio> element is straightforward to use. Here’s the basic syntax:

				
					<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Explanation

  • <audio>: This tag wraps around the audio content.
  • <source>: Specifies the file path and the MIME type of the audio file. If one file type is not supported by the browser, the next source will be tried.
  • type="audio/mpeg": Defines the MIME type of the audio file (MP3 in this case).

Audio File Formats

Different browsers support different audio formats. It’s a good practice to provide multiple formats to ensure the audio works across all browsers. The most common formats are:

  • MP3: audio/mpeg (Widely supported across all browsers).
  • OGG: audio/ogg (Supported by Firefox, Chrome, and Opera).
  • WAV: audio/wav (High quality, but larger file size).

Example with Multiple Formats:

				
					<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  <source src="audiofile.wav" type="audio/wav">
  Your browser does not support the audio tag.
</audio>

In this example, the browser will play the first supported format. If it doesn’t support MP3, it will try OGG, and if that fails, it will try WAV.

Attributes of the audio Element

The <audio> element comes with several useful attributes that can enhance the functionality and user experience of the embedded audio.

  • controls: Adds play, pause, and volume controls.

				
					<audio controls src="song.mp3"></audio>
  • autoplay: Starts playing the audio automatically when the page is loaded.
				
					<audio autoplay src="song.mp3"></audio>

Note: Many browsers restrict autoplay functionality unless the audio is muted by default.

  • loop: Repeats the audio track after it finishes playing.

				
					<audio loop src="song.mp3"></audio>

  • muted: Starts the audio in a muted state.

				
					<audio muted src="song.mp3"></audio>
  • preload: Informs the browser whether to preload the entire audio file, only metadata, or nothing at all. It can take the following values:

auto: Preloads the entire audio.

metadata: Preloads only the metadata.

none: Does not preload the audio.

				
					<audio preload="auto" src="song.mp3"></audio>

Attributes of the audio Element

As mentioned earlier, providing multiple audio file formats ensures compatibility across various browsers. Browsers that do not support one format will automatically fall back to the next available format.

Example:

				
					<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Here, if a browser doesn’t support MP3, it will fall back to OGG.

Audio Controls and Autoplay

Adding controls like play, pause, and volume is as simple as adding the controls attribute to the <audio> tag. This creates a default browser audio player.

Example

				
					<audio controls src="song.mp3"></audio>

Output

This will render an audio player with play/pause buttons and volume control. The user can also seek (move forward/backward) within the audio.

Autoplay and Looping Example:

				
					<audio autoplay loop controls src="song.mp3"></audio>

In this example, the audio will start playing automatically, loop once finished, and provide controls to the user.

Customizing the Audio Player

Sometimes, the default audio controls do not fit the design of your site. You can create your own custom controls using JavaScript.

Example with Custom Play/Pause Buttons:

				
					<audio id="myAudio" src="song.mp3"></audio>

<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>

In this example:

  • We use the id="myAudio" to reference the audio element.
  • Two buttons control the play and pause actions using JavaScript.

Adding Subtitles with the track Element

Just like videos, audio can have subtitles or text tracks added with the <track> element. This can be useful for podcasts, music with lyrics, or educational content.

Example

				
					<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</audio>

Here, a caption file (captions_en.vtt) is provided, which the user can enable to follow along with the audio.

Embedding Audio from External Sources

Instead of hosting audio files on your own server, you can also embed audio from external sources such as SoundCloud or other music hosting platforms.

Example of SoundCloud Embedding

				
					<iframe data-lazyloaded="1" src="about:blank" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" data-litespeed-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123456789"></iframe>

This code embeds a SoundCloud player directly on your webpage.

Advanced Techniques for Controlling Audio with JavaScript

JavaScript can give you full control over audio playback. For example, you can adjust the volume, mute the audio, or display the duration of the audio file.

Example

				
					<audio id="myAudio" src="song.mp3"></audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="setVolume(0.5)">Set Volume to 50%</button> <script type="litespeed/javascript">var audio=document.getElementById("myAudio");function playAudio(){audio.play()}
function pauseAudio(){audio.pause()}
function setVolume(value){audio.volume=value}</script>

This example includes:

  • A button to play the audio.
  • A button to pause the audio.
  • A button to set the audio volume to 50%.

Embedding audio in HTML using the audio tag has become a straightforward task, thanks to HTML5. With a few lines of code, you can add audio to your website, and with the various attributes like controls, autoplay, and loop, you can fine-tune how your audio behaves. By offering multiple formats and customizing your player with JavaScript, you can ensure compatibility and a better user experience.Happy coding !❤️

Table of Contents

Home
Roadmap
ATS Resume
Playground
Resources