Styling html5 audio how to#

The first child shows the progress of the sound, and the second child is a range input that helps us achieve a nice toggle for moving to different sections of the audio. Next, there’s a div element with two children: We are using it only for loading and playing the sound, and the sound used for this example is this from SoundHelix. The HTML for our example looks as follows: ĭiving deeper into this, the first element is the audio element: Without further ado, let’s get started deconstructing what we have on the codepen shared above. There is room for customizability, which is something we’ll also be seeing in this article. However, we do not have to stick with the appearance of these controls. In Chrome, the default audio controls will look similar to the following: The browser has default controls for the audio element which can be activated when the controls attribute is present: It’s just sound! But as you would see on many websites, different controls are attached to sounds to show the status of the sound - either paused, playing, or containing other information. This is expected because there is nothing visible about sound. Using the element like above shows a blank screen, though the audio is embedded and downloaded by the browser. The audio element is a DOM element used for embedding sounds from different sources in a webpage. The star of this example is the audio element, so let's take a special look at it first. What we are going to do in the next few sections is walk through the interesting pieces of HTML, CSS, and JavaScript that help bring our sound example to life. If you haven't done so yet, open our Codepen example in a separate tab and look at the HTML, CSS, and JavaScript: Once you are ready, let's read on to see how everything works. Play with the example a little to get familiarized with what capabilities can be built. There can be improvements to our example, of course, but this simple demo shows how JavaScript can control the properties of the audio element. See the Pen Audio Element and JS Example by Kirupa on CodePen.

Styling html5 audio how to#

To help us understand how to work with audio on the web, below is an example of what we will be deconstructing: By the end of this tutorial, you will have a concise understanding of how to work with audio in your web pages. There are several audio libraries used to achieve all of this functionality, but in this article we’ll look at how to achieve all of this (and more) using nothing but plain JavaScript. They have a lot of features like muting, increasing and reducing sound volume, pausing and playing, and much more. Audio elements are used a lot in web applications.