WordPress mb.miniAudioPlayer, a short tutorial
[youtube=http://www.youtube.com/watch?v=B8Dr4aUNGgo]
I just published a major update of the miniAudioPlayer plugin for WordPress.
This video shows how it works and how you can customize each instance of the player on your WordPress posts.
You can get this plug in from the WordPress plugins directory at this url: http://wordpress.org/extend/plugins/wp-miniaudioplayer
Youtube now allows Autoplay to works only if the audio muted: mute:true
Hi, was wondering. the autoplay on open works but only logged in as admin
does this simple declaration css no longer work <a class="{autoplay: true};" href= etc?
I can’t get it to show up on wp 3.8
One other thought: It would be great if you could find a way to easily improve the look of the player…more convenient options for color…maybe 2-3 different looks/configurations, and especially support for better-looking fonts and fonts sizes. Personally, I would be willing to pay more for a premium version of the player. Just something to consider.
By the way, I had a site visitor this week who was sight-impaired and she complained that the player needed to support accessibility options like a screen reader. Just something to consider.
Button is disabled till you select a link pointing to an mp3 file.
First you need to create the link to the audio file either via the insert media panel or just writing yourself the link.
Than you can select it and use the button to customize the player.
button icon in page and posts is not clickable, and is gray, so i cant use it at all
Hi,
The download button doesn’t appear on iOs because it doesn’t allow the download of the file.
Bye,
Matteo
It was just pointed out to me that the download button does not appear/function on iOS (or at least not on the iPad). Hopefully, you can add that feature soon.
c-
Hi Alonso,
The button on the editor page will appear when you place the cursor on a link to an mp3 file. In the last WordPress they changed the default way to place a media file into a page; now the insert a shortcode instead of the link to the file. On the “upload file” window, when you choose an audio file, you need to set “link to media file” on the right.
Bye,
Matteo
urgent help
Hello such, I’m looking for a plugin similar to the Audio player but also work in different types of mobiles services such as android, ipad, tablet, etc.. the problem is that I can not configuarlo, install, active and does not appear the button on the page where you want to post, even though in active plugin settings the option to display this button, what could be happening?, my version wp is 3.6.1,
In case you need to install via filezila and get the download, and if by another plugin problems have only I have the Video html5 Embed & Thumbnail Generator does this?.
thanks for your prompt response
Hi,
By default the player is initialized with all the player element visible except the download button. to activate the download button just add: downloadable:true to the parameters.
All the other should be visible.
Bye,
M
Is there any fix for the Internet Explorer 10?
How do i get the Download Play and Stop buttons to show … it says pram -> all features ,, how do i turn all features on ?
like on this page
http://pupunzi.com/mb.components/mb.miniAudioPlayer/demo/demo.html
The plugin is using a font to render the player buttons. You probably disabled the use of custom fonts on that browser on your computer as it is working fine on all the browsers I tested.
Bye,
M
Only in FireFox 23 does the player reflect Vm for the audio sound graphic and P for the right play arrow.
One at a time I have disabled every plug in but the Vm and P still remain rather that the graphics for sound and right play arrow.
Any Suggestions….
Thank you.
Hello – great plugin… but I can’t configure to get my (Amazon S3 hosted) MP3s to download using the download button – downloads the files with 0kb data!
I’ve set the MP3s in my S3 bucket with the following Http Headers:
Content-Disposition: attachment
Content-Type: audio/mpeg
Example here: http://www.hardnoyz.co.uk/mixes/oldskool/dj-hardnoyz-back-to-89#more-670
I’d really appreciate any advice.
Thanks
Shane
Hi,
You are right, My fault…
You can temporarily modify the jquery.mb.miniPlayer.js file in the js folder of the plug in directory at line 98
from:
to:
I’ll fix this problem in the next update.
Bye,
Matteo
I am seeing a very strange effect with the player now. It appears that a duplicate image of the volume control is “ghosting” just under the player itself.
You can see what I’m referring to on this page:
http://voiceoversuperfriends.com/super-voiceover-talent/
I have a problem with the player it is showing two times in post http://bangbangplaylist.com/daft-punk-ram-album-stream/ The code of this post is this one Contact can u help me.. It worked fine until i have updated it to new version..
Thanks for the reply. Malfunctions I have been reported from friends, and on FF on my mac (with adobe flash player updated) does not work. It ‘s very likely due to the wordpress template. Thank you again.
Bye
By the way, it does not function in Internet Explorer version 10.
I’m using it on W7PRO so your test is not really true…
The plug in works on All browsers (including IE7) except for FF without the flash plugin installed.
If you are encountering problems using it on a specific theme the causes should be found there checking for conflicts. But that doesn’t mean the plugin don’t work on a specific browser or Os.
Bye,
M
News:
The plugin works with:
Safari, Chrome, W7 home
Don’t work in
WXP, W7PRO
Bye
Hi. I love this audioplayer! Congratulations for this excellent work. I found, however, a difficulty with firefox 20.0 with a wordpress theme, DK, by themeforest. I followed the procedures and the player is installed regularly, but on the page where it is present, you will see a black stripe around 250 px over the background and the player does not work. In Safari everything works perfectly. The URL site is http://www.holdtheline.it, the page http://www.holdtheline.it/documenti/audio/. If you want I send you a screnshot by email. Now deactivate maintenance mode, so you can see the page. Thanks for your attention.
Giovanni
p.s. va bene se ti scrivo in Italiano? il mio Inglese è piuttosto incerto.
Hi,
if you set the width as percentage it will work fine on mobile too.
Bye,
Matteo
Hi, Matteo…
Is there a way to set max-width on a player? It’s wider than my page for the mobile version.
Thanks…
🙂 jonathan
That is not a bug but is the correct behavior as generally mobile devices doesn’t allow files download from the browser for their security policy.
That’s why the download button is hidden on mobiles.
Bye,
Matteo
Hi,
can not see the download arrow when we authorized in the code (it works well on Windows IE, FIREFOX, CHROME)
“downloadable” is checked and the code says “downloadable: true,” on page wordpress
With the default android’s browser, Firefox or Maxthon it does not work, it does not works too on ipad (test of a friend with safari) even if i fixed it by
player.opt.downloadable = true;
in jquery.mb.miniPlayer.js
on android
Regards
Hi Bruno,
What was exactly the problem on Android?
Hi,
I’ve recently sent you a problem about the download button on android
I’ve fixed it like this
player.opt.downloadable = true;
in jquery.mb.miniPlayer.js
I don’t know if it is THE solution.
Version 1.2.8 doesn’t fix it by default.
Regards.
Thanks for you job.
Hi,
I fixed a bug that was preventing the correct work on IE.
Download the latest release.
Bye,
Matteo
I love this player…it bascially covers all my needs (which is suprisingly hard to find among existing plugins). It’s working fine for me on Android and iOS, and on Firefox and Chrome on the PC. However, I can’t get it to work on IE9 on the PC. Are you able to hear the players (bottom of page) functioning on this page in IE9?
http://freekidsmusic.com/artists-1/abby-the-pipsqueaks/
And, if not…any idea what’s going on?
You are a superstar – thanks you for the quick fix..
Just updated to v. 1.2.1 fixing this bug.
Best,
Matteo
Hey thre – sorry to post twice, but it appears I have the same issue as other mentioned above. Text link showing not the player. This has only happened on your latest upgrade to the plug-in. So the player was showing but since upgrading the plug-in the player does not now appear.
Any assistance greatly appreciated as I really like this plug-in and like others to get an audio plug-in to work on WP is a real issue.
http://www.nzcbd.co.nz/korea-korea-will-you-heed-my-call/
Hi,
On FF the player is falling back to a flash player. One of the possible cause is the file name you give to the audio: it shouldn’t have accent or special character in it; neither spaces. Just letters and numbers. Another cause could also be the format of the mp3 audio. Try with different bit-rates.
Best,
M
Hi,
I am using your mb player since yesterday. Everything works great on Chrome but at firefox it won`t play sounds.
You can check it here:
http://polishthehunter.pl/poradnik-mulak/
Kind Regards,
Rafael
Hi
I love your plugin, but I don’t know how to install it on my header. What code do I use. I am a newby, so I am still trying to understand. I know how to use it in a new page or post, but not header. I want it to show on my homepage.
Please help
…er continued…
it was the cache plugin, W3 total cache optimizer. And thankfully not the theme. I had put in some things to try to make my site run faster (it’s a little slow) W3 being one of the recommended ones.
Thanks Matteo
Good sleuthing:) Thankfully it was the
Hi Jon,
Looking at the code of the page I can see that the javascript needed by the miniAudioPlayer are not included at all in the page header…
And even the CSS files. I don’t know why; all the javascript you have on the page are loaded from: http://www.jonraney.com/wp-content/cache/;
Do you have a plugin that is optimizing the cache?
Did you try changing theme?
Bye,
Matteo
Hi Mateo, the media is referenced by default. That wasn’t the error. In terms of the javacscript errors. don’t much about it other than if iI nvoke the chrome view of the console it shows a bunch of object errors in the page.
this is it here http://www.jonraney.com/audio-test-page/
I had disabled some other j-query plugins I use which may show non-relevant errors as well. I also tried a j-query updater after posting here. Nothing really works.
All in all I don’t think any audio player, yours or wp audio- the one by martin laine works on my site. I’ve been stuck with audio links only for some time
Hi Jon,
When you insert the audio file link in the page you should be careful that the “link to” option in the “Attachment Display Settings” box is set to the media file, otherwise wordpress will create a link to a new page with the media content.
If that doesn’t work than you should control if you have errors in the javascript console and tell me what is the thrown error.
If you are using the latest jQuery (1.9.+) on your site it may break plugins that were previously working; and if just one of the plugins is throwing errors than it probably breaks all the other behaviours.
Bye,
Matteo
Matteo, I have been anticipating try to use your plugin but am basically in the same position as Adam at the top of the page. Everything is enabled on your plugin as per your vid tutorial, other possible conflicting player plugins have been deactivated, yet I have the same issue as Adam.
Insert Media- simply does the default- a text hyperlink to audio that loads another page. The visual editor shows when if you want to apply the miniplayer to another audio file instance but that simply inserts a box with all the player code showing- including the intended audio referenced
I’d hate to have just uninstall because I don’t understand it. Looks like a nice player. Audio players in WP seem to be one of those things that are generally problematic based on forum buzz so was looking forward to your solution.My site is musically oriented.
Sincerely
Jon Raney
Hey Matteo,
Thanks for getting back to me. What I want is for the audio player to appear on the main page I sent you. At the moment it shows a hyperlink which then takes it through to another page where there the audio player can be seen.
Do you know how I overcome this?
Thank you for your help.
Have an awesome day.
Adam
Hey Matteo,
Thanks for getting back to me. What I want is for the audio player to appear on the main page I sent you. At the moment it shows a hyperlink which then takes it through to another page where there the audio player can be seen.
Do you know how I overcome this?
Thank you for your help.
Have an awesome day.
Adam
I can see it working on the site…
What is the problem exactly?
I had deactivated it whilst trying to test other players. It is activated now. Still the same problem.
I can’t see the miniAudioPlayer javascript inclusion in the source code of your page; did you activate the plugin?
Thanks for getting back to me Matteo.
Here is the link. The audio file is under section ‘2’… it is the ‘201 – Habit 1- Be Proactive’ hyperlink.
http://109.203.104.38/~lighthou/book-study-mastery-groups/
Hi Adam,
do you ave a link to a page where you include an mp3 file in your site?
Did you check that the link is pointing to the mp3 file and not to the media page?
Please can you help me? I’ve installed the plugin and activated it. I’m following your instructions to make it work. When I embed an audio file into the body of text the play doesn’t appear. It only remains as the file title and as a hyper link. How do I get the player to appear.
I’d really appreciate your help.
Thank you.
Adam
Thank you so much for your quick reply, all good now I had checked the box but did not realized had to click on the link. By the way your web site is great, I’m a musician and taking matters into my own hands and building my sites in wordpress, so I checked out some sites using flash, but was really impressed with the serenity your site inspires, all the best and really great pluggin. Will stay in touch, I’m in Australia. Chow
Hi,
You can activate the post editor feature from the plugin settings page checking the “Activate the player customizer in the post editor” check-box.
Doing that, once in the post editor, selecting the link at the audio file will show the button.
Bye,
Matteo
Hi Pupumzi
Just installed the plugin player today works great in the page but not getting the audio icon in post text editor and therefore cannot open the advanced menu to overide default settings, any suggestions, Thanks, Be well, Alan.
It should work; the volume is removed as it can’t be set on iOs devices but it used to work fine… I’ll check if there’s a bug
Does the miniaudioplayer work on iPad/iPhone?
It’s working on my desktop and it looks OK on the iPad, but I get no sound. No way to click on the volume bars and my ipad sound is all the way up. Default sound is on 6.
hi! i have wordpress 3.5 could you please tell me how to display the icon in toolbar
thanks in advance for your help and patience
Ah I found it, the way to display the icon in toolbar, thank you.
If it have repeat function and playlist, it be nice! 🙂
Thank you, guy.
Currently, I’m have updated wordpress to 3.5 but I can’t see the icon in toolbar of editor. Is this bug?
Do you mean in the post editor?
if that happens is because you don’t set the ATTACHMENT DISPLAY SETTINGS as link to media file.
Great plugin. However the latest update shows the name of the MP3-file (without the MP3 Extension) instead of the name within …
Hi Luise,
As I can see from your link the component you are using now doesn’t download the audio file; it opens a new window with the file. The download in the mb.miniAudioPlayer for WordPress will instead sream the file as application/octet-stream to let users download the file via the save as browser window. If it doesn’t work you can either have a wrong Apache configuration for the mp3 audio file or problems with the encoding of the file name or security issue. If you want to have the same behavior of the actual component you need to change line 100 of the jquery.mb.miniAudioPlayer.js file as follow:
From:
2
3
4
//window.open(player.opt.mp3,"map_download");
location.href = map.downloadUrl+"?filename="+title.asId()+".mp3"+"&fileurl="+ player.opt.mp3;
}).attr("title","download: "+title);
To:
2
3
4
5
6
7
window.open(player.opt.mp3,"map_download");
//location.href = map.downloadUrl+"?filename="+title.asId()+".mp3"+"&fileurl="+ player.opt.mp3;
}).attr("title","download: "+title);
</code
But first I suggest to try adding <code>encodeURI(player.opt.mp3)
instead of player.opt.mp3 as follow:
2
3
4
//window.open(player.opt.mp3,"map_download");
location.href = map.downloadUrl+"?filename="+title.asId()+".mp3"+"&fileurl="+ encodeURI(player.opt.mp3);
}).attr("title","download: "+title);
Bye,
Matteo
Hi,
This component has not been thought to play play-list of songs but just for a single one. You can instance as many players as your list is. Anyway there’s a method that let you change the audio file of the player that you can use to make your list:
.
You can use it as follow:
Bye,
Matteo
Hi,
That seams to be a problem with the Apache config file and MIME type configuration; You can find many answers on the web on how to configure your Apache server to get the correct header to manage files.
Here some post where you can find your answer:
http://stackoverflow.com/questions/3401650/stop-mp3-file-from-streaming-in-browsers
http://www.htaccess-guide.com/adding-mime-types/
http://serverfault.com/questions/435914/apache-doesnt-send-me-an-mp3-header-even-when-i-use-a-direct-address-to-the-fil
But many others on Google.
Bye,
Matteo
Hi, Matteo. I need the player to download the songs. To attach a song to a post, I upload it through FTP (my own server) and then copy/paste the link into the post. That way, even though your player is able to play to songs, when I press “download” it doesnt download the actual song, only a meta file. Meanwhile, if I upload a song through WordPress’ own panel (admin panel), it plays and download the songs correctly. If you go to my website (www.ohmyrock.net) you can see an exemple o the URL I’m trying to download, since WPAudio recognises them and downloads them, whether I upload from FTP or WordPress’ Panel. I would also glady donate if I were able to use your plugin.
hi – great plugin – will donate for sure – but have the same problem on my download button – if I upload with ftp or wp media library uploader – it downloads a meta file only – not the actuall mp3 file. Any known reason / fix for this?
Any way of getting the player to play a list instead of just one song at a time?
Mille grazie Matteo!
Well done and very useful. Greetings from the North!
Hi,
The player uses the audio file URL for the download source; what do you need exactly? is the audio file hosted on another domain?
can you give me an example of the URL the player should download instead?
Bye,
Matteo
Hello, Matteo.
This is a great plugin. I have a music blog and I currently use WPAudio. I’d love to trade to this plugin, but when I set the option to download the music, the player only downloads the songs that I’ve uploaded through the WordPress Panel. As most of them I upload though FTP, the player is not able to download them.
Please, is there a way I can edit the CSS code so I can make it able to download the songs I’ve uploaded through FTP?
Thanks in advance for your answer.
Hi Ken,
As there are no differences on the WP back end interface between themes, the mb.miniAudioPlayer button on the post editor is placed on the top right of the TinyMCE button-bar in VISUAL modality; if it doesn’t appear either you don’t activate the plugin or it is getting conflict with some other plugin (and generating errors in the console).
Bye,
Matteo
How do I get the TinyMce icon into the WP kitchen sink?
Very cool plugin.
Hi Steve,
For the upload file size issue:
You can change this limit editing the Apache global php.ini file of your wordpress installation
as explained here: http://www.howtogeek.com/50792/how-to-increase-the-php-file-upload-size-limit/.
For the outside url issue:
The plugin can work also with URL on different domains; don’t need to upload the file; in the media uploader choose the “from url” tab and insert the correct URL to your file.
The only thing the mb.miniAudioPlayer needs is a valid .mp3 url.
That’s all.
Bye,
Matteo
You have made a beautiful audio player and very well thought out. Unfortunately, the uploader is limited to 20mb files, which is smaller than our two hour classes. Allowing a link to the file as a URL in a shortcode would overcome this limitation. It also allows the files to outside the site instead of the media library which facilitates backing up the site. Thank you for considering these changes.
Hi Neil,
First you add the MP3 file simply using the wordpress uploader and you don’t need to open neither the settings or the customization windows in the editor. The donate window should not appear on the uploader :-).
If the donation window (that appear only in the miniAudioPlayer settings page and in the customization window in the post editor page) should not freeze the browser and if it happens you maybe have conflicts with other plugins. It’s hard to fix as I can’t replicate this bug in any way; What other plugins are you using on your WP instance? Did you try disabling them? did you try using Firefox?
Bye,
Matteo
Everytime I try to add an MP3 file it asks me to Donate, I have no problem donating but when I can’t get the plugin to work because the donation freezes my chrome browser. Is there a fix to this?
I would like to use this player in a table I have created of my musical compositions, but I do not know how. Is it possible to insert it in a table rather than a post? Thank you The table is under the category compositions