jquery.mb.miniAudioPlayer

mb.miniaudioplayer

An HTML5 player for your music! Pietro Bicocchi – Allegro

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.

v. 1.8.5

 

Also available as WordPress® component.

You can find the WordPress plugin here:
http://wordpress.org/extend/plugins/wp-miniaudioplayer

What’s new in 1.8.5 release:

  • Bug fix: Added a patch to jPlayer that should have fixed that Android bug. Now works correctly on Android devices too.

What’s new in 1.8.1 release:

  • Feature: The player size is more accurate.
  • Feature: The player is now rendered as DIV instead of TABLE.
  • The skinMaker has been redesigned.
  • ! IMPORTANT:
    If you are updating from a previous version you have to replace the CSS file (many classes has been redefined).

What’s new in 1.7.7 release:

  • Feature: Updated to jPlayer 2.5.0.

247 Responses

  1. Richard
    Richard at · Reply

    Dear Matteo

    I have implemented your Audio Player on a site created in Dreamweaver, first testing the page locally. When viewed locally in Safari 6.1.4 for Mac, all works normally, but when looking at the same page on the web, the progress bar does not move, and the rewind button does not work, so the clip can only be played once. The play/pause button does work. I have stripped out all scripts not needed for the player on this page http://www.romacafolla.co.uk/audiotest.html and the issue still arises.

    I have obviously done something stupid, but cannot work out what it is. Can you help?

    With thanks in advance
    Richard

  2. abraham
    abraham at · Reply

    Hi

    this is a cool plugin however it seems that the player disappears when any ajax jquery.min.js scripts are added to bp template and leave just original mp3 link in raw form please can assist with this issue
    Thanks

  3. DopeSoundBrothers
    DopeSoundBrothers at · Reply

    Hey, i could have missed it, but is there a way to force player to play next instance of the player?

    Right now, when current song stops, you gotta play next one manualy.

    Hope i was clear enough.

  4. Default_User
    Default_User at · Reply

    I’ve gotten everything working but I noticed that the play button doesn’t have the pulsing glow effect in IE, any ideas?

    1. Default_User
      Default_User at ·

      I am using IE10 and V1.7.7 but sill no glow effect

      Can you please check the effect on my test page: http://terraservaalliance.com/test

  5. Tony
    Tony at · Reply

    Just an example here of including player in a loop.
    The following is a page in php.

    Accessing a database table with a column containing song names (ex.yoursong.mp3), referenced in a directory : “inc/music”

    I find that the player fails with song titles that has spaces in them, in either IIS or Apache. I save the files without spaces and they will download fine.– Maybe something to look at and fix??

    Well here it is:

    <?php
    if (!function_exists("GetSQLValueString")) {
    function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
    {
    if (PHP_VERSION

    $(function(){
    $(“.audio”).mb_miniPlayer({
    width:240,
    inLine:false,
    id3:false,
    downloadPage:true,
    downloadPage:”map_download.php”
    });

    });

    List All Music

     
    <a id="” class=”audio {loop:true, inLine:true, downloadable:true}” href=”inc/music/”>

  6. default_user
    default_user at · Reply

    BTW; I can’t find Pietro Bicocchi’s allegro song anywhere expect your site?

    1. Default_User
      Default_User at ·

      I am using another Jquery video player and it loads without any MIME type changes; are you sure it doesn’t have anything to do with mb.aidioplayer’s code?

  7. default_user
    default_user at · Reply

    Hi,
    Great player; just added it to my test page @ terraservaalliance.com/test
    its simple, stylish works well! I noticed something strange though my site has some link to “Download File” in the absolute position of my page for some reason. I’ve changed the color of the text and link so that it matches my footer to conceal it but haven’t found a way to get rid of it completely yet.

    1. default_user
      default_user at ·

      Now I found an even stranger error the player will not function at all on IE, but it works fine on Firefox and Chrome.

    2. default_user
      default_user at ·

      I figured out why I was getting the “Download File” link in my footer. It turns out that the “Widgetkit” plugin in Joomla was causing some sort of conflict when using the code for mb.audoiplayer. I disabled the widget altogether and magic! no weird link in my footer. I would like to find a solution for IE though

    3. Zaki Hassnoddin
      Zaki Hassnoddin at ·

      I checked the association of audio MIME types and everything’s already there; what MIME types can the server be missing?

    4. Default_User
      Default_User at ·

      OK. I checked with the F12 developers option in IE and I checked for any MIME type errors and there weren’t any. The only errors I saw at all were mismatched end tags (i.e. improper usage) but no other code errors for mb.audioplayer’s code. What else could be the problem?

    5. Default_User
      Default_User at ·

      The buttons don’t react at all; its like they are just embedded images. No response. Since the F12 console errors aren’t real time I can’t check whether pressing the play button produces error

      When you say MIME types are you just talking about media for example:

      Media MIME Types:

      AddType audio/mpeg mp3
      AddType audio/mp4 m4a
      AddType audio/ogg ogg
      AddType audio/ogg oga
      AddType audio/webm webma
      AddType audio/wav wav

      AddType video/mp4 mp4
      AddType video/mp4 m4v
      AddType video/ogg ogv
      AddType video/webm webm
      AddType video/webm webmv

      Because my server already has these associations

    6. Default_User
      Default_User at ·

      My mistake I was using last year’s version; the player does play in IE.
      But I noticed that the play button does have the pulsing glow effect in IE, any ideas?

  8. baoquoc
    baoquoc at · Reply

    I have occur error $master.attr is undefined in jquery.mb.miniPlayer.js file 🙁
    Can you help me ?

  9. Victor
    Victor at · Reply

    Dear Matteo,

    I’m planning to use your wonderful plugin in my web page. Just a suggestion and a question:

    It would be nice to have a widget allowing (random) reproduction of a list of audio files!

    Now the question. I want my visitors to listen to my files, but not to download them (at least, not too easily!). They are located in the folder http://www.mywebname.com/audio, and say I write href=”/audio/mysong.mp3″ in the HTLM constructor to link to one of them . When using the option “See source code” in my browser, the text href=”/audio/mysong.mp3″ is visible, so it is easy to deduce that http://www.mywebname.com/audio/mysong.mp3 is the full link to the file. Moreover, if IE8 is used, a copy of mysong.mp3 can be found in the temporary folder. However, these cheap tricks do not work for the file “Pietro Bicocchi – Allegro” from your demo page. Could you please let me know the reason?

    Best regards and thank you again for your great work!
    Victor

  10. Tony
    Tony at · Reply

    Hey Matteo,

    I’ve got it for now….

    I’m using the basic:

    in the head—-

    $(function(){
    $(“.audio”).mb_miniPlayer({
    width:240,
    inLine:false,
    id3:false,
    downloadPage:true,
    downloadPage:”map_download.php”
    });

    });

    and in the body —
    1st instance:
    <a id="m1" class="audio {loop:true, inLine:true, downloadable:true}" href="inc/music/”>

    second :
    <a id="m2" class="audio {loop:true, inLine:true, downloadable:true}" href="inc/music/”>

    third:
    <a id="m3" class="audio {loop:true, inLine:true, downloadable:true}" href="inc/music/”>
    …etc…

    Just pulling the different database records:

    $row_WADAsg_recital_comp_desc[‘background_music]
    $row_WADAsg_recital_comp_desc[‘background_music_2]
    $row_WADAsg_recital_comp_desc[‘background_music_3]
    …etc….

    from the database and populating the player dynamically with the same records

    Only thing I changed is the “id”

    m1
    m2
    m3
    …etc…

    this is where I get lost— to automatically increment this value in the script and the correlate it in the link 🙁

    At least in the above it provides the ability for multiple players on the same page to be populated dynamically from database records.

    NOT a LOOP but works for now!

    I still hope for a server side loop script, this would be great for dynamic lists…

    A great Player!

    Thanks,
    Tony

Leave a Reply