pupunzi / jquery.mb.miniaudioplayer Goto Github PK

an HTML5 / jQuery audioplayer (mp3 / ogg)

HTML 1.18% CSS 20.39% JavaScript 75.60% PHP 2.83%

ogg jquery mp3 javascript audio-player html5 jplayer

jquery.mb.miniaudioplayer's Introduction

mb.miniAudioPlayer

An open source jQuery component to build a mini audio player for your mp3 or ogg files.

jquery.mb.miniPlayer is a GUI implementation of the jquery.jPlayer plug-in realized by © Happyworm LTD. (many thanks to Mark Boas)

jquery.mb.components, another way of thinking the web

jquery.mb.miniaudioplayer's People

Contributors

Stargazers

Watchers

jquery.mb.miniaudioplayer's Issues

Cannot call method 'replace' of undefined.

Hi. I'm hitting a weird error when trying to install the player. I have included the three resources on my site, jplayer.js, metadata.js and mb.miniplayer.js.

I'm triggering the player with the sample code you provide in the wiki

<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>

<script>
  $(function(){
    $(".audio").mb_miniPlayer({
      width: 240,
      inLine: false
    });
  });
</script>

This throws an exception Uncaught TypeError: Cannot call method 'replace' of undefined on line 71 of mb.miniPlayer.js which is this line:

var downloadURL = $master.attr("href").replace(".mp3", "").split("/");

The weird ting however is that when I set a breakpoint there, $master.attr('href') does not seem to be undefined. Its actually "http://www.miaowmusic.com/mp3/Miaow-07-Bubble.mp3".

Any idea why there's an exception?

Doesn't playing on IE

The player is looking like fine, but the play function just doesn't work. I'm not getting any error on console. On Chrome and FF is working.
I tried on IE9+
Any idea?

coding the ogg file when using 'change track'

is there a way to code both the mp3 and the ogg file when using 'change track'?

Download button is Hidden on Android

Hi Matteo @pupunzi ,

Is it possible to keep the download "circle with arrow down" button visible on Android? If so, could you please share how to do so?

It works wonderfull on PC (Chrome browser) but on Android (Chrome browser), the button is just not visible.

<a id="m1" class="audio {skin:'kSkin', mp3:'[link-to-mp3]', loop:true, inLine:true, downloadable:true}" href="[link-to-mp3]"></a>

Thanks

Cannot transform mp3 audio file links into players

Hi. Does your plugin work with the last Wordpress 6.2.2 version? I cannot transform mp3 audio file links into small players.

Can it be smaller than your size 0?

Hi,

We are a small set-up selling music CDs.
Each CD has a webpage, on which there is its track listing.
I want to replace the current 'flash player' for each track, with a cross-browser HTML5 audio player .

We want it to be physically very small (max height ~16px), with the following controls:

Play/Pause
Timeline
Volume
You can see our current flash version here: www.frog-records.co.uk/products/dgf84

Is miniAudioPlayer right for the job?

can there be multiple instance on a page?
Is it easy to change the display (to small images) i.e. smaller than your size 0
When one track is played, can we turn any others off?

Also - the webpage contents (with the track-listing and player) are maintain by content creators without any technical background. Can we minimise/simplify the html they have to enter to something like:
just a div and a track urlRef?

Which would be best place to start - your jquery or your WordPress plugin?

If not, can you direct me to a better place to start. (We don't want to be re-invent wheels)

Thanks

How to autoplay a playlist in mb.miniAudioPlayer

After making a WordPress playlist with mb.miniAudioPlayer, I notice that it will only play one selection at a time. Each selection must be clicked to get it to play. Is there any way to make the playlist play the next song automatically (i.e., auto-play)?

Also, how can I make the playlist window bigger (longer) so that it displays more than ten tracks? Here’s the page in question: https://musicinsideout.wwno.org/2020/11/21/winter-playlist/

Thanks,
Lars

Progress line twitch

Increase animation of progress line is incorrect. When track is playing, progress line jumps to some pixels back sometimes.

You can reproduce the bug in the first player of a "demo.html" page. Browser: Google Chrome.

.mb_miniPlayer is not a function

Hello,

with certain themes it doesn't work.
It seems that the script is no registered:

Uncaught TypeError: jQuery(...).not(...).not(...).mb_miniPlayer is not a function
    at initializeMiniAudioPlayer ((index):2292)
    at HTMLDocument.<anonymous> ((index):2302)
    at i (jquery-2.2.4.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2)
    at Function.ready (jquery-2.2.4.min.js:2)
    at HTMLDocument.J (jquery-2.2.4.min.js:2)

Issues with demo in Android browser

Demo at http://pupunzi.com/mb.components/mb.miniAudioPlayer/demo/demo.html works great for me in Chrome but not on Android browser. Symbols appear as letters (eg play symbol is a 'p'). The player expands and contractys well but does not play the audio file.
Please advise.

Player not showing in post

When I add an mp3 file, it shows up perfectly in the edit page, but when I go to the post page it looks like this:

It will play (which is more than the wordpress inbuilt player did) but the skin is missing. Tried to make my own skin - no difference.

mb_miniPlayer_changeFile search for 'length'

Hello,

using the mb_miniPlayer_changeFile throws the following exception:

jquery.js?ver=1.12.4-wp:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3
    at s (jquery.js?ver=1.12.4-wp:2)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at a.jPlayer._absoluteMediaUrls (jquery.mb.miniAudioPlayer.min.js?ver=1.9.3:10)
    at a.jPlayer.setMedia (jquery.mb.miniAudioPlayer.min.js?ver=1.9.3:10)
    at HTMLDivElement.<anonymous> (jquery.mb.miniAudioPlayer.min.js?ver=1.9.3:9)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.a.fn.jPlayer (jquery.mb.miniAudioPlayer.min.js?ver=1.9.3:9)
    at a.fn.init.changeFile [as mb_miniPlayer_changeFile] (jquery.mb.miniAudioPlayer.min.js?ver=1.9.3:8)
    at HTMLButtonElement.onclick ((index):432)

I just test it with a simple example button

<button onclick="$('#mbmaplayer_1').mb_miniPlayer_changeFile('http://www.miaowmusic.com/mp3/Miaow-04-Lismore.mp3',false,'Lismore (mp3)')">Lismore (mp3)</button>

«  around download link in list download shorcut

In the mb.miniAudioPlayer wordpress extension some « are added on each side of the download link. Example :

_{<a class="map_download" href="https://ensemblealauda.fr/blog/wp-content/uploads/2022/02/Gloria-Melenaour-Tenor.mp3" download=" «&nbsp;Gloria (Melenaour) - Ténor&nbsp;» .mp3" style="display: inline-block; cursor: pointer;" title="download: «&nbsp;Gloria (Melenaour) - Ténor&nbsp;» ">d</a>}
Thanks

Treeview conflict

After adding this player Treeview plugin (https://github.com/jzaefferer/jquery-treeview/blob/master/jquery.treeview.js) stops working. Firebug shows unknown error in jQuery.

Example: http://www.mosreklama.net/btl/organizacija-treningov
Try to push any plus icon in the left menu. When treeview plugin works the plus elements has toggler() function for onclick. Example: http://eng.mosreklama.net/internet

Broken in Firefox 18.0.2 on OS X 10.7.5

The demos on http://pupunzi.com/#mb.components/mb.miniAudioPlayer/miniAudioPlayer.html don't work for me in Firefox even the one with an OGG specified. I also can't get any of my own code to work in Firefox using OGG. Fine in Chrome, though.