Audio Player controls – for Volume Slider / current time / total time etc

hi Rikard – thanks for your reply. the site is under development / in maintenance mode so I have posted a private link and WP login for you below.
the page I’m working on with the audio players is:-
http://british-voiceover.co.uk/homepage/home-v6-classic-4-column-_dup/

you could also replicate what I am trying to do, using one of your audio posts such as:-

I found a helpful post online which gave some great insight and tips into controlling and styling the audio player.
Here’s the link in case any other Enfold Users are curious how to do it.

For my website audio players I wanted to hide the volume slider and the mute button.here’s what I added in quick CSS box.

.mejs-controls .mejs-volume-button {display: none !important;}

.mejs-controls .mejs-horizontal-volume-slider {display: none !important;}

it worked perfectly in safari as shown here:-
http://screencast.com/t/V7R4rzc1xl

but chrome has a strange effect – this effect is only there before you hit the play button.
once the play button is pressed the player looks perfect.
here’s a screen grab of the odd effect in chrome before play is pressed.
Any idea what might cause this? or how to fix it in?
http://screencast.com/t/ZBU8gwRa

would love to hear any thoughts you have.

thanks

pete

HI Andy
I still the problem.
here;s another screenshot.
http://screencast.com/t/5pm5xvOw
A show on the top player here – I still have the problem with the black line. when I press the play button – then there is also the secondary problem that you also show on your screenshot in the second player from left – i.e. the total timecode collapses back so its next to the current time code – so you cannot see the progress bar. You can see this problem on my screenshot on the bottom player.

In safari it seems to work fine. so it seems to be just issues with the chrome browser.

regards
Pete

hi Andy
sure – the link you provide works for me too – please remember my original issue right at the top of this thread was related to customisation of the audio payer with CSS not the default audio player you link to.

Please add this quick CSS to your business flat installation and see what happens. this should remove the volume slider and the mute button.

.mejs-controls .mejs-volume-button {display: none !important;}
.mejs-controls .mejs-horizontal-volume-slider {display: none !important;}

Your own screenshot from September 16th on IMGR shows one of the problems – i.e. the total time counter collapsing back into the current time area. here it is marked up. http://screencast.com/t/FwB5FJtJof

The black line showing on Chrome browser only is the second problem – when audio player sits inside the icon block.
http://screencast.com/t/ZBU8gwRa

thanks
Pete

hi again
now the problems have shown again in chrome!
http://screencast.com/t/BDzmvZaAU0
must be an issues with quick CSS fix not compatible with chrome browser. It displays perfectly in safari.
I tried deactivating plugins but it made no difference.
thanks
Pete

it looks fine on your site – but you aren’t using the quick CSS change that I am to hide mute button and total time code.
it must be my CSS change as described on my earlier post above – which is causing a problem in chrome only.
regards
Pete

Hi
Its the CSS for the removal of the volume slider that causes the problem.

But it looks like the issue is related to the width available to hold the player.
here when browser made narrower and layers stack in 2 high it looks ok. also looks ok in mobile view.
http://screencast.com/t/wAObVei9

here when narrower area for the player – the black line appears. so in chrome it seems to be related to the narrow size of the icon box when I have 4 players in one line within the website container. if you drag the browser windows you see the black line appear and disappear repeatedly.
http://screencast.com/t/TRGXy82YtR

regards
Pete

hi
this is all I am using.
Please add this quick CSS to your installation and see what happens. This should remove the volume slider and the volume/mute button.

.mejs-controls .mejs-volume-button {display: none !important;}
.mejs-controls .mejs-horizontal-volume-slider {display: none !important;}

regards

Pete

hi andy

login info for my WP site and the page link – and the CSS – was on my second post right at the top of this thread.
hope it helps you to reproduce the problem.
the big issue is on chrome as I mentioned.
Firefox seems ok and safari is ok.
thanks
Pete