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.
#Customize html5 audio player css 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. Playbackrate.Audio elements are used a lot in web applications. Playbackrate.value = ĭisplay.innerText = displayvalue(aybackRate) querySelector ( '.scc span' ) const displayvalue = val => ) Ĭonst audio = document.querySelector('.scc audio') Ĭonst playbackrate = document.querySelector('.scc input') Ĭonst display = document.querySelector('.scc span') ĪaybackRate = querySelector ( '.scc input' ) const display = document. querySelector ( '.scc audio' ) const playbackrate = document. Let’s only go into basic CSS for styling here:Ĭonst audio = document. In this case, from half speed to four times the speed. The range control is good for this as it also gives us keyboard access and allows us to limit the speeds we want to allow. For the speed control, we need a slider with a label to keep it accessible and a span element to show the current value of the playback speed.
#Customize html5 audio player css download
In this case, using the audio element with a controls attribute already gives us a play button, a scrubber, time display, volume and an overflow menu with download option.
0 kommentar(er)
