Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How do you hide HTML5 Audio controls?

Tags:

javascript

html

hide

html5-audio

audio

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>
like image 494
technopeasant Avatar asked Apr 18 '11 01:04

technopeasant

People also ask

How do I hide audio player?

Long-press of the folders/files to show hidden options. Tap on the menu icon and select Hide. This will hide the folder and all the files saved within. Now, when you open the music player app, you won't see these audio file formats with your songs.

How do I show audio controls in HTML?

HTML Audio - How It WorksThe controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

What happens when you omit the controls attribute for the audio tag?

If you don't specify the controls attribute, the audio player won't include the browser's default controls.

How do I turn off audio tag?

You can also disable an audio tag if you add style="pointer-events:none" to it…

2 Answers

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="">
like image 120
Shadow2531 Avatar answered Sep 21 '22 23:09

Shadow2531

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

like image 33
Chris Eberle Avatar answered Sep 19 '22 23:09

Chris Eberle
Sign in to Comment

Related questions

innerHtml prepend text instead of appending
ng-action does not add action attribute in the form
Use proxy middleware with gulp connect
EBUSY: resource busy or locked, open 'PATH HERE'
What is the meaning of || in javascript?
Chrome identity launchWebAuthFlow only opens empty callback page
Is it possible to send a reason for Jasmine 2 specs skipped with xit or pending()?
Is it possible to e.preventDefault in window.onPopState?
jstree jquery how to iterate through all nodes
Best way to Handle Exception Globally in Node.js with Express 4?
$(...).selectpicker is not a function
How to load a component from a variable name in Vue.js?
Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.eot'
Empty body in fetch post request
"Found @client directives in query but no client resolvers were specified" Warning when using client cache
How can I access the dom tree of child window?
Is Subtracting Zero some sort of JavaScript performance trick?
onbeforeprint() and onafterprint() equivalent for non IE browsers
How does javascript logical assignment work?
Refresh parent window from child window using javascript

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!