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 voice-pitch Speech Media property
The CSS voice-pitch property is used to set the baseline pitch of the speaking voice when using speech synthesis. This property controls how high or low the voice sounds during text-to-speech output.
Syntax
selector {
voice-pitch: value;
}
Possible Values
| Value | Description |
|---|---|
x-low |
Sets an extremely low pitch |
low |
Sets a low pitch |
medium |
Sets a medium pitch (default) |
high |
Sets a high pitch |
x-high |
Sets an extremely high pitch |
Example: Setting Voice Pitch
The following example demonstrates different voice pitch values −
<!DOCTYPE html>
<html>
<head>
<style>
.low-pitch {
voice-pitch: low;
}
.medium-pitch {
voice-pitch: medium;
}
.high-pitch {
voice-pitch: high;
}
</style>
</head>
<body>
<p class="low-pitch">This text will be spoken with a low pitch.</p>
<p class="medium-pitch">This text will be spoken with a medium pitch.</p>
<p class="high-pitch">This text will be spoken with a high pitch.</p>
</body>
</html>
When using a screen reader or speech synthesis, the first paragraph will be spoken with a low pitch, the second with medium pitch, and the third with high pitch.
Note: The voice-pitch property only works with screen readers and speech synthesis tools. It requires CSS Speech Module support, which is not available in standard web browsers for visual rendering.
Conclusion
The voice-pitch property provides control over the pitch of synthesized speech. It's particularly useful for accessibility applications and creating varied vocal presentations in speech-enabled interfaces.
Updated on: 2026-03-15T13:36:13+05:30
150 Views
Advertisements