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
CSS voice-balance Speech Media property
The CSS voice-balance property controls the horizontal positioning of synthesized speech in a stereo field. This property determines whether the voice appears to come from the left, center, or right channel when using text-to-speech functionality.
Syntax
selector {
voice-balance: value;
}
Possible Values
| Value | Description |
|---|---|
left |
Voice appears to come from the left channel |
center |
Voice appears centered in the stereo field (default) |
right |
Voice appears to come from the right channel |
leftwards |
Voice shifts toward the left |
rightwards |
Voice shifts toward the right |
Example: Setting Voice Balance
The following example demonstrates different voice balance settings for various elements −
<!DOCTYPE html>
<html>
<head>
<style>
.left-voice {
voice-balance: left;
background-color: #ffebee;
padding: 10px;
margin: 5px 0;
}
.center-voice {
voice-balance: center;
background-color: #e8f5e8;
padding: 10px;
margin: 5px 0;
}
.right-voice {
voice-balance: right;
background-color: #e3f2fd;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<p class="left-voice">This text will be spoken from the left channel.</p>
<p class="center-voice">This text will be spoken from the center.</p>
<p class="right-voice">This text will be spoken from the right channel.</p>
</body>
</html>
Three paragraphs appear with different background colors (light red, light green, and light blue) representing different voice balance settings for text-to-speech output.
Note: The
voice-balanceproperty is part of CSS Speech Module and requires a screen reader or text-to-speech software to hear the actual effect. The visual styling is only for demonstration purposes.
Conclusion
The voice-balance property enhances accessibility by controlling stereo positioning of synthesized speech. It's particularly useful for creating immersive audio experiences in web applications that support speech synthesis.
208 Views
