Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS volume Property
The CSS volume property is part of the speech synthesis specification and controls the median volume of synthesized speech. This property is primarily used for accessibility features and speech-enabled interfaces.
Syntax
selector {
volume: value;
}
Possible Values
| Value | Description |
|---|---|
number |
Any number between 0 and 100. 0 represents minimum audible volume, 100 represents maximum comfortable level |
percentage |
Values calculated relative to the inherited value, clipped to range 0% to 100% |
silent |
No sound at all (different from 0) |
x-soft |
Same as 0 |
soft |
Same as 25 |
medium |
Same as 50 (default value) |
loud |
Same as 75 |
x-loud |
Same as 100 |
Example: Setting Volume Levels
The following example demonstrates different volume settings for speech synthesis −
<!DOCTYPE html>
<html>
<head>
<style>
.quiet-speech {
volume: x-soft;
color: #888;
}
.normal-speech {
volume: medium;
color: #333;
}
.loud-speech {
volume: x-loud;
color: #000;
font-weight: bold;
}
.percentage-volume {
volume: 80%;
color: #444;
}
</style>
</head>
<body>
<p class="quiet-speech">This text would be spoken very softly.</p>
<p class="normal-speech">This text would be spoken at normal volume.</p>
<p class="loud-speech">This text would be spoken loudly.</p>
<p class="percentage-volume">This text uses 80% volume.</p>
</body>
</html>
Four paragraphs with different text styling appear. The volume property affects speech synthesis but has no visual effect in regular browsers. Text is displayed with varying colors and weights for demonstration purposes.
Browser Support
The volume property has limited browser support and is primarily implemented in specialized speech synthesis systems and screen readers. Most modern browsers do not support this property for standard web content.
Conclusion
The CSS volume property controls speech synthesis volume levels. While part of the CSS specification, it has limited practical application in standard web development due to poor browser support.
Updated on: 2026-03-15T11:54:12+05:30
139 Views
Advertisements