HTML Audio Circles

When embedding my audio files into my HTML, the default style is a box with play/pause buttons, the length of the clip, as well as a volume and download button.


This is not the style I would like – instead I wanted a circle with the buttons inside, and the loader going around the circle, like so:


However, I wasn’t really sure how to achieve this. I searched online for different types of plugins I could use to achieve a similar enough style. After looking and trying a few different ones, I found one that was the closest to what I wanted – HTML5 Circle Audio Player.

This one has 5 different skin styles РI chose the first as it was the closest to the one I mocked up. I also changed some of the CSS to match my own colour scheme, and this is what it looks like now:



As you can see, it’s a little small and is stuck to the left. I’m having trouble trying to change the size of it and the alignment, but I will continue to try to get it the way I want it.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s