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.