Would you like a Responsive and Touch-Friendly Audio Player? Osvaldas Valutis has built a jQuery plugin that replaces <audio> element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
It has been tested on the latest Safari, Chrome, Firefox, Opera both Mac and Windows versions. The player works well on Internet Explorer 9, 10 and gracefully degrades to mini mode on earlier versions. It also works on iOS 6, Windows Phone 7 and Android 4.2 default browsers. However, the earlier Android versions does not support “audio” nor “embed” elements, so the player won’t work there at all.
Requirements: jQuery Framework
License: License Free