A style attribute on an <audio> tag assigns a unique style to the audio player.
Its value is CSS that defines the appearance of the player.
A style attribute on an <audio> element.
The audio is styled with a border.
<audio style="border:10px solid lightsalmon;
border-radius: 50px;"
controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
The style attribute specifies the style, i.e. look and feel, of the <audio> element.
A style contains any number of CSS property/value pairs, separated by semicolons (;).
The style attribute overrides any other style that was defined in a <style> tag or an external CSS file.
This inline styling affects the current <audio> element only.
<audio style="CSS-styles">
| Value | Description |
|---|---|
| CSS-styles | One or more CSS property/value pairs separated by semicolons (;). |
A style attribute on an <audio> element.
Clicking the button toggles the border style.
<audio id="myaudio"
style="border:10px solid lightsalmon;
border-radius: 50px;"
controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
<br/><br/>
<button onclick="toggle();">Toggle style</button>
<script>
let toggle = () => {
let element = document.getElementById("myaudio");
if (element.style.borderStyle === "solid") {
element.style.borderStyle = "dashed";
} else {
element.style.borderStyle = "solid";
}
}
</script>
The style attribute assigns a colored border to the <audio>.
Clicking the button calls JavaScript which changes the border style.
Here is when style support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
9.0 | Sep 2012 |
 Opera
|
10.0 | Aug 2009 |
 Safari
|
11.5 | Jun 2009 |
