audio-example

Top 8 Awesome HTML5 Audio Players

audio-example

 

HTML5 has great features that make it powerful and useful. Developers can do online everything without any required additional plugins. Today we are going to share the 8 best HTML5 audio players.

1) jPlayer

jPlayer is a completely free and open source (MIT) media library written in JavaScript. A jQuery plugin (and now a Zepto plugin), jPlayer allows you to rapidly weave cross-platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

jplayer

2) Universal HTML5 Audio Player

  • Compatible with iOS, Android, and desktop browsers.
  • Conveniently uses Flash Player for non-HTML5 browsers when necessary.
  • Protect your audio from being hijacked by using a beep overlay, or another overlay sound.
  • Support for both static pages and dynamic web apps.
  • Auto fallback to Flash in Firefox if not using .ogg files.
  • A circular progress meter displays playback position & time remaining.
  • Easily customize the color of the progress meter.
  • HTML5 audio buttons are smart and stop playback when another button starts playing.
  • Set a default size, and/or use custom dimensions for each button to support multiple layouts, and designs on the same page.
  • Easily customize the play and pause images.

html5-player

3) Media Element js

MediaElement.js is a complete audio and video player. You can also use just the MediaElement object to replace <video> and <audio> with a Flash player that mimics the properties, methods, and events of HTML MediaElement API. However, there a few changes, most notably on setter properties.

mediaelement

4) Audiojs

Audio.js is a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible Flash Player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers that can be styled with standard CSS.

audiojs

5) HTML5 Audio Player

html5audioplayer

6) Speakker

speaker

  1. <audio class=”speakker dark”>
  2.     <source src=’./sound/’ type=”application/jsonp”/>
  3. </audio>
  4. <script type=”text/javascript”>
  5. $(document).ready(function() {
  6.     $projekktor(‘.speakker dark’, {
  7.         plugin_share: {
  8.             links: {
  9.             ‘download':{
  10.              buttonText: ‘download’,
  11.              code:     ‘./sound/?dl=true’
  12.             },
  13.             ‘lastfm':{
  14.              buttonText: ‘lastfm’,
  15.              code: ‘http://www.lastfm.de/music/paniq’
  16.             },
  17.             ‘wikipedia':{
  18.              buttonText: ‘wikipedia’,
  19.              code: ‘http://de.wikipedia.org/wiki/Elektronische_Musik’
  20.             },
  21.             ‘admin':{
  22.              buttonText:    ‘admin’,
  23.              code: false
  24.             }
  25.         }
  26.     });
  27. });
  28. </script>

7) Mootools HTML5 Audio Player

mootolls

8) HTML5 Audio Player

html5player