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!

HTM开发者_StackOverflow中文版L:

<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>

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="">

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

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



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