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>

回答1:

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

回答2:

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

回答3:

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



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

来源：https://stackoverflow.com/questions/5697724/how-do-you-hide-html5-audio-controls