CODEWITHSUNDEEP
javascripthtmlaudiohidehtml5-audio
technopeasant
technopeasant

Reputation: 7969

How do you hide HTML5 Audio controls?

How can I hide HTML5 audio's browser specific controls? I'm making thumbnail images to represent each track and JavaScript to play/pause.

Thanks!

HTML:

<audio class="thumbnail" id="paparazzi" controls="none">
    <source src="song.ogg" type="audio/ogg" />
    <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
    Your browser does not support HTML5 audio.
</audio>

Upvotes: 20

Views: 74493

Answers (3)

sukanya
sukanya

Reputation: 11

 var audio = document.getElementById('audioFile');
    audio.controls = false;



    <audio  id="audioFile" width="100%" height="auto" controls>
              <source src="xyz.mp3" type="audio/mpeg">
              </audio>

Upvotes: 1

Shadow2531
Shadow2531

Reputation: 12170

The controls attribute is a boolean attribute. This means that if it's specified, controls is true and if it's not specified, controls is false.

As far as validity goes, if you want controls to be true, you can specify it these ways:

<audio controls>
<audio controls="controls">
<audio controls="">

Upvotes: 25

Chris Eberle
Chris Eberle

Reputation: 48795

Don't specify the controls attribute at all, this should stop it from showing (I got this after a 5 second google, don't quote me on it).

HTML5 video - show/hide controls programmatically

Upvotes: 16

Related Questions