The HTML Audio Element (Part 1)

This post is the first in a series that will discuss the HTML audio element, web audio in general, and all of the various ways that sound can be heard on a web page.

The simplest way to add audio to your web page is not very different that adding an image. You can use an audio tag:

<audio src="path/to/your/audio.mp3" type="audio/mpeg"></audio>

This is the minimal code you would need to build a custom interface, but if you want an audio player (with play button and volume) to show up on your web page, you also have to add the boolean attribute, controls.

<audio src="path/to/your/audio.mp3" type="audio/mpeg" controls></audio>

The way this default player looks depends completely on the web browser. For example, on Chrome it might look like this:

Google Chrome HTML audio player

But on Firefox it might look like this:

Mozilla Firefox html audio player

So as easy as it is, you don’t have a lot of control over the appearance this way. In future posts I will explain the several ways to customize your own player.

Web Audio Fallback

Perhaps you have different versions of the audio, let’s say one is an MP3 and another is an OGG file, which is an open source audio file type that not all browsers know how to use. But the OGG file is a smaller file, and you want it to be used wherever it can be, therefore making the loading time faster and the user experience better. You could use the source element like this:

<audio controls>
     <source src="path/to/your/audio.ogg" type="audio/ogg">
     <source src="path/to/your/audio.mp3" type="audio/mpeg">
</audio>

The browser will try to understand the first one, and if it does not support that first file type, it will then try the second one. You can add as many fallbacks as you like, even adding iframes or default text if the user’s browser just simply doesn’t understand any of them

<audio controls>
     <source src="path/to/your/audio.oga" type="audio/ogg">
     <source src="path/to/your/audio.ogg" type="audio/ogg">
     <source src="path/to/your/audio.mp3" type="audio/mpeg">
     <iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src=".."></iframe>
     Your browser does not play HTML audio.
</audio>

There are also other attributes other than controls that you can add to the audio element. The common attributes are:

  • autoplay
  • crossorigin
  • currentTime
  • duration
  • loop
  • muted
  • preload

Of course you can always attach:

  • class
  • data-*
  • id
  • src
  • style
  • tabindex
  • title

And some of the less common audio attributes that are sometimes used for more advanced code are:

  • accesskey
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • lang
  • mediagroup
  • spellcheck

So you could have something like:

<audio id="my-song" class="song" src="path/to/your/audio.mp3" type="audio/mpeg" controls autoplay loop></audio>

More details on these attributes can be found at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

Next Up: Audio Element CSS

As mentioned above, there’s not a lot you can do to style the default player in each respective browser, but there are a few things you can do to add add a little more customization and character to your player. In the next post we will discuss some of these ways to style your web audio player with CSS.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • CSS Styling the Audio Element

    There are a few things you can do with CSS to style the HTML audio element in various browsers.

  • How to Get WP RSS Aggregator Feed to Validate

    I’m using the plugin WP RSS Aggregator, and I couldn’t get the custom feed to validate in other places. The validator said that it was missing an <author> field. If an item doesn’t have an author, then the feed doesn’t even supply an empty one. The way to fix it is to go to wp-content/plugins/wp-rss-aggregator/templates/custom-feed/entry.twig ... Read more

  • How to Remove Rank Math Top Banner

    Rank Math has added an ugly top banner to the sites using its plugin. Here's how to hide it.

  • Fix for High CPU Usage on Siteground

    The MailPoet cron job on my website was triggered by Google Bot and caused my CPU seconds on Siteground to go over the quota. Here's how I fixed it.

  • Fast MIDI Song Starter

    Here is a really easy way to build MIDI chord progressions using iRealPro.

  • What is Full Kontakt Required?

    Perhaps you don't know what Kontakt is or how it works. Hopefully we can sort these things out and get you on your way to making some music.

  • How To Style a Range Input Slider

    If you are going to build a custom html audio player, you will need to know how to style a range input slider.

  • How to Build a HTML Audio Player with Vanilla JS (Part 2)

    Here is another tutorial on how to build a custom html audio player with vanilla js.

  • Coding a Custom HTML Audio Player (Part 1)

    Here is a starter tutorial on how to create a custom HTML audio player with HTML and JavaScript.