With the power of HTML5 and the ease adding multimedia through technologies such as WordPress oEmbed, anyone can add compelling video or audio content to their website. And, while it’s great that default media players are included from a purely functional standpoint, so much more can be done to improve the user experience.
The default player may provide basic functionality, but it doesn’t necessarily match your branding or offer some more advanced features. So designers have taken it upon themselves to add creative flair, along with high-end functionality to create some incredibly unique media players. Take a look at some of our favorites below and feel free to experiment with the source code.
The Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Themes, Plugins & Design Assets
Round and Beautiful
This circular audio player from Sebastian Beltz puts the straight edges of a standard media player to shame. It’s quite beautiful to look at, intuitive and the inclusion of sharing/favorite buttons makes it a more complete UI.
The fact that you can drag this audio player around your screen is cool. But even better is the simple and smart UI that Antoinette Janus has created. Scrolling through the playlist and playing the selected track is quick and painless.
Accessibility Built In
It’s a simple player, indeed. But Joe Watkins has added in a terrific alternative UI for accessibility. The text-based buttons for play and pause ensure that anyone can consume the media. The ability to view a transcript is just brilliant.
Material Design Comes to Audio
Michael Zhigulin’s use of Material Design on this player is outstanding. From the popular “card” layout to the smooth animations, it fits in nicely with Google’s standard.
Spinning Some Vinyl
The concept here is just too cool. Matt Stvartak’s player is basic in functionality, but the rotating vinyl that pops out of the sleeve is a standout design.
Smooth and Responsive
Part of the idea behind HTML5 media was to ensure that mobile devices were able …