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.

audio.PNG

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:

audio-2.PNG

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:

audio-3.PNG

audio-4.PNG

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s