Home

jquery.mb.miniAudioPlayer

This is a GUI implementation of Happyworm jPlayer plugin, an HTML5 audio engine, developed on jQuery framework, that let you listen mp3 and ogg file over the html5 audio tag where supported or using an invisible flash player where not supported. For more informations about html5 browsers’ support go to jPlayer documentation site.

go to demo page
go to blog page

Add the css and the javascript file in the HEAD of your page:

       <link rel="stylesheet" href="css/jquery.mb.miniAudioPlayer.min.css"/>
       <script src="jquery.mb.miniAudioPlayer.js"></script>

JS call for the player:

      $(".audio").mb_miniPlayer();

HTML constructor:

  <a id="m1" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg'}" href="http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3">miaowmusic - Bubble (mp3/ogg)</a>

Parameters:

width: (int) – set the width for the player
skin: (string) – set the skin for the player – available: black, blue, orange, red, gray
volume: (int) – set the volume for the player
autoplay: (boolean) – define if the player should start once initialized
playAlone: (boolean) – define if the player should close once another player start
inLine: (boolean) – define if the player should be inline with the other sibling elements
volumeLevels: (int) – set the number of steps for the volume control
showVolumeLevel: (boolean) – define if the volume level command should be visible
showTime: (boolean) – define if the timer should be visible
showRew: (boolean) – define if the rewind command should be visible
addShadow: (boolean) – define if the player display has shadows
mp3: (string) – define the path to the .mp3 file
ogg: (string) – define the path to the .ogg file
downloadable: (boolean) – define if the download button should be available
allowDownloadOnMobile: (boolean) – define if the download action should be available on mobile devices; on some devices the download action is not allowed
id3: (boolean) – define if the title and the author should be retrieved from the audio id3 metatags

swfPath: (string) – the path to the swf player for the fallback

Metadata parameters:

All the parameters above can be replaced on each element as metadata (see: http://plugins.jquery.com/project/metadata)

Methods:

$.fn.mb_miniPlayer_changeFile(mp3,ogg,title) – with this you can change the file a player is playing.

Ex.: $('#m5').mb_miniPlayer_changeFile('http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3',false,'Lismore (mp3)')

$.fn.mb_miniPlayer_play()
$.fn.mb_miniPlayer_stop()
$.fn.mb_miniPlayer_toggle()

Ex.: $('#m1').mb_miniPlayer_play();
Ex.: $('#m1').mb_miniPlayer_stop();
Ex.: $('#m1').mb_miniPlayer_toggle();