19

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>
gonzobrains
  • 7,856
  • 14
  • 81
  • 132
technopeasant
  • 7,809
  • 31
  • 91
  • 149

3 Answers3

24

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="">
Shadow2531
  • 11,980
  • 5
  • 35
  • 48
16

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

Community
  • 1
  • 1
Chris Eberle
  • 47,994
  • 12
  • 82
  • 119
0
 var audio = document.getElementById('audioFile');
    audio.controls = false;



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