Note: in some cases some basic CSS is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. How to Create JavaScript Audio Player With Custom Controlsįirst of all, load the following assets into the head tag of your HTML document. The resultant video player style used here is rather basic this is intentional, as the purpose is to show how such a video player could be styled and be made responsive. There are also possible improvements suggested in the comments, including changing the sliders into input sliders and making the player into a Vue or React component. You can experiment with the small demo that I’ve created on CodePen, or just have an overview of the possibilities by having a look at the code. The CSS properties that can be used are: width, box-shadow, border-radius and transform.
Additionally, there is a function to convert the duration of the audio from seconds to a formatted timecode. As of 2019, CSS styling options for the HTML audio tag are quite limited.