Introduction to HTML Audio: Enhancing Web Experiences with Sound

Introduction

In today's digital age, web experiences have become a critical part of our lifestyles and Audio is the only other paradigm you need to take your user experience to next level. Many news websites and browsers are integrating a TTS for the listener guys out there like me. A lot of 3D creative websites include micro-animations tied up with little sound effects as to give fully immersive experience and attention to detail.

And a bunch of amazing tools like ElevenLabs - Most Realistic Speech Generation using AI, Realtime Audio Streaming, Spotify Soundtrap, Podcastle - Easy Podcast Creation & Editing in seconds, Krisp - Reduce Noise to None, basically every other audio tool on the internet uses it.

What is HTML Audio?

Technically, it's a feature of HTML5 that allows developers to embed audio content directly into web pages.

In short, to perform any audio related stuff on the web, you need HTML Audio base! Now don't go overthinking about web 2 or web 3, it will still be required.

Before HTML5, adding audio to websites required external plugins like Flash. However, with the introduction of the <audio> element in HTML5, integrating audio into web pages became much simpler and more efficient.

The <audio> Element

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

• embeds audio files to web page

• supports MP3, WAV, OGG

• controls attribute adds playback controls like play, pause, and volume to the audio player

• other attributes like autoplay, loop, muted, preload do exactly as named.

• preload = none or metadata or auto

How you should be working with HTML Audio!

The <audio> element supports multiple audio formats. However, not all browsers support all formats, so it's essential to include multiple sources to ensure compatibility:

• MP3 (audio/mpeg): Widely supported by all major browsers.

• WAV (audio/wav): High-quality format, but larger file size.

• OGG (audio/ogg): Open-source format, supported by most browsers

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

Playback Methods

There are some very simple methods to control audio playback using JavaScript.

• play(): Starts playback.

• pause(): Pauses playback.

• currentTime: Gets or sets the current playback position.

• volume: Controls the volume (0.0 to 1.0).

• duration: Gets the total duration

<audio id="myAudio" controls>
  <source src="audio-file.mp3" type="audio/mpeg">
</audio>

<button onclick="document.getElementById('myAudio').play()">Play</button>
<button onclick="document.getElementById('myAudio').pause()">Pause</button>
<button onclick="document.getElementById('myAudio').volume = 0.5">Set Volume to 50%</button>

And the cool stuff!

Support for HTTP/HTTPS protocols!

Which means you can hook it up with a live-stream, live-broadcast or an online radio and it will work perfectly.

<audio controls>
  <source src="https://youtube.com/@iam4tt4/live-stream" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Making it easy to embed live or pre-recorded streams into your web pages, providing users with a seamless audio experience.

Conclusion

Just by itself, It is pretty much bare-bones unless we utilize some 3rd party library, but even the fundamental understanding of it can help you can create richer and more engaging web experiences and that is exactly what we aim to do. Right?