pupunzi / jquery.mb.miniaudioplayer Goto Github PK
View Code? Open in Web Editor NEWan HTML5 / jQuery audioplayer (mp3 / ogg)
an HTML5 / jQuery audioplayer (mp3 / ogg)
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:
Is miniAudioPlayer right for the job?
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
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)
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.
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
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.
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.
autoPlay:true doesnt work
autoplay:true does work
is there a way to code both the mp3 and the ogg file when using 'change track'?
Hi,
Assume i have 5 rows and have links of mp3 file in each row of a cell.
How to integrate the miniaudioplayer? Can the miniaudioplayer auto-detect all such links and add mp3 player near to it?
Thanks.
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
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
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
Can be solved change the policy behavier
Here
chrome://flags/#autoplay-policy
More about
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
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?
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>
Can ogg files be played on iOS devices these days?
I have had so much trouble trying to play Ogg files inside mobile safari on my iPhone or iPad.
Does your script support that feature?
Thanks
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?
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
Hi. Does your plugin work with the last Wordpress 6.2.2 version? I cannot transform mp3 audio file links into small players.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.