Supports responsive HTML5 audio player-audioplayer. js for touch devices

Date: 2013-5-22 Source: gbin1.com

Online Demo

If you want to develop a responsive HTML5 player,Audioplayer. jsIs a good choice. It uses the HTML5 audio tag to help you generate a responsive audio player without using any embed code, images, or flash. It uses CSS to define the interface completely. The size after compression is only 4 kb.

Main features

• Responsive
• Touch
• Adaptive
• HTML5 audio local support
• Ease of use.
• No Image
• No flash
• Lightweight, 4 kb after compression

How to Use

Html

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

Javascript

    <script src="jquery.js"></script>    <script src="audioplayer.js"></script>    <script>    $( function()    {    $( 'audio' ).audioPlayer();    });    </script>

Is it very simple? After the plug-in is called, the audio tag will be parsed into the following HTML elements:

    <div class="audioplayer audioplayer-stopped">    <audio src="audio.wav" preload="auto" controls></audio>    <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>    <div class="audioplayer-time audioplayer-time-current">00:00</div>    <div class="audioplayer-bar">    <div class="audioplayer-bar-loaded"></div>    <div class="audioplayer-bar-played"></div>    </div>    <div class="audioplayer-time audioplayer-time-duration">&hellip;</div>    <div class="audioplayer-volume">    <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>    <div class="audioplayer-volume-adjust"><div><div></div></div></div>    </div>    </div>

I hope you will like this audio plug-in.

Friendly reminder: Because this online demonstration does not contain music in the wave format, ie is not supported. Please use Firefox and chrome to play music.

Source: supports responsive HTML5 audio player-audioplayer. js for touch devices