How do you hide HTML5 Audio controls?

javascript html audio hide html5-audio
technopeasant picture technopeasant · Apr 18, 2011 · Viewed 59.8k times · Source

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>

Answer

Shadow2531 picture Shadow2531 · Apr 18, 2011

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

Related questions

How to prevent "The play() request was interrupted by a call to pause()" error?

I made a website where if the user clicks, it plays a sound. To prevent the sound from overlapping, I had to add the code: n.pause(); n.currentTime = 0; n.play(); But that causes the error: The play() request was …

Read More
HTML 5 video or audio playlist

Can I use a <video> or <audio> tag to play a playlist, and to control them? My goal is to know when a video/song has finished to play and take the next and change its …

Read More
HTML5 check if audio is playing?

What's the javascript api for checking if an html5 audio element is currently playing?

Read More