mediaelement.js - How to hide Audio controls?

Question

I am trying to implement Mediaelement.js into a site for both video and audio, the video is all working great however what I need to do is hide the audio element so it does not show on the page at all and that the MEJS audio control bar isnt visible. Playback for the audio will be handled through a function to play/pause the audio as needed.

Ive tried altering the CSS and also changing the audio code to include "hidden=true" currently the audio blocks look like this:

    <audio id="Audio101" hidden="true">
    <source src="audio/audio1.mp3" />
    <source src="audio/audio1.ogg" />
    <embed src="audio/audio1.mp3" hidden=true autostart=false loop=false>
    </audio>

Does anyone know how to hide only the Audio (not Video) MEJS controls?

Cheers.

Solution 1

You can specify the player controls that are displayed with the 'features' parameter. This example shows only the volume control and sets the player to the size of just that button.

$('audio').mediaelementplayer({
    features: ['volume'],
    audioWidth: 26,
    audioHeight: 30
});

The 'features' available are:

    features: ['playpause','progress','current','duration','tracks','volume','fullscreen']

To show no controls at all:

$('audio').mediaelementplayer({
    features: ['volume'],
    audioWidth: 26,
    audioHeight: 30
}); 

Solution 2

You can instantiate a MediaElement instead of a full fledged MediaElementPlayer:

var $element = $('<audio src="foo.mp3" autoplay="true"/>');

var mediaelement = new MediaElement($element.get(0), {
    startVolume: 1
});

You can then play/pause like this:

mediaelement.play()
mediaelement.pause()

Comments

[arxpoetica]

This works, and should be used if you are trying to hide ALL the controls. Otherwise, the alexroper is correct.