A Stunning Flat Responsive HTML5 player For Audio Streaming

A stunning Flat Responsive HTML5 Player for Audio Streaming with customized controls and skin. The jQuery Audio Player Plugin is basically customizes default HTML5 Audio Element using JavaScript and some CSS, that gives complete awesome look to your Audio player you always need.
Many Advance web developers are working with default HTML5 player and customizing it with different styles and skins. HTML5 Audio Element is one of the most popular feature of HTML5. It is now already supported in almost every modern browsers, even so for IE9. Hover each broswer provides default native HTML5 player skin.

Demo Download

How it works

The JQuery Plugin Works with default <audio> Element and replaces targeted element with litle HTML using JavaScript events attached to it. It is tiny lightweight HTML5 player  for Audio Streaming in web page to play a single audio file. The Player works with jQuery Library, The Jquery Plugin would be pretty much useless without the respective CSS which is responsible for the looks of HTMl5 audio Player and some of the features summarized below.

Features

• Responsive and Mobile ready
  The HTML5 Player for Audio streaming is completely responsive and feel good with every size of device, Either it is smart phone, Tablet or thirty inches of large display. It doesn't requires media queries or any CSS coding for making it responsive, It automatically adopts the fluid layout.
• Touchable and User Friendly
  The player is really touchy and alive. This stunning HTML5 Audio Player for audio streaming can be used easily with touch-capable screens. All the controls are touchy you can control every thing with cursor and can also do with your finger. Every action is touch enabled and defined.
• Adaptivity and support
  If JavaScript is disabled? No worries, the default browser’s player will do the job.The Volume button appears when you touch volume control icon. (bad for iOS). Some unknowns browsers does not support the
• Image-less and Lightweight
  The looks and styles of HTML5 Audio Player are purely CSS designed no even single Image is used.The minified JQuery Audio Player Plugin is so light weight, it's size comprises total 4kb of space.
• Usable.
  The essential Play / Pause and playback progress controls, Volume On / Off / Up / Down controls and indication of how much of the audio is preloaded (buffered).
• Flash-less.
  No Flash are required here.

Must read:
A Complete HTML5 Audio Player for your website
MediaElement.js - HTML5 Audio and Video player Framework

Installation

Get start with adding HTML5 player for Audio streaming into your web page. Adding html player into your website comprises some following steps. 

1# Add JavaScript and CSS

Add the following JavaScript Library files into to your body section to dynamically customize the default HTML5 Audio element into touchy and responsive audio streaming player.
There are two different ways of setting up HTML5 Audio player plugin in your website. You may use the following CDN files.

<script src="https://mymediaelements.github.io/stunninghtml5player/js/player.js"></script>

<link href="https://cdn.jsdelivr.net/mediaelement/stunninghtml5player/js/player.css" rel="stylesheet"/>

or download the package and upload the files into your website directory.

<script src="path/to/player.js"></script>

<link href="path/to/player.css" rel="stylesheet">

2# Include JQuery

To Call the plugin you must add the the following JQuery into the body section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( function()
    {
        $( 'audio' ).audioPlayer();
    });
</script> 

3# Setup the Player

Specify multiple audio formats, So that every user can easily listen to your audio, Because none of all browsers supports all kind of audio formats.  Add the following default HTML5 Audio Element tag into your desired location of the body section. This HTML5 Player supports multiple audio files on the same webpage, you may add multiple audios to single webpage using the same default HTML5 Media element audio tag.

<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>

No more coding are required, You are now completely done. Enjoy the responsive audio player.

Feedback

The HTML5 player is tested and it is found good on the latest browsers like latest Safari, Chrome, Firefox, Opera both Mac and Windows versions for audio streaming. It also works perfect on Internet Explorer 9,10 and degrades  to single play/pause button on earlier versions. It is mainly works with touch screen devices many of them run iOS6, Windows Phone 7 and Andriod 4.2 default browsers, However, the earlier Andriod operating system does not support Audio elements, so the player may not work well.