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-duration Speech Media property
The CSS voice-duration property is used to control the duration of speech synthesis when synchronizing speech with other media elements. This property is part of CSS Speech Module and helps in creating timed audio presentations.
Syntax
selector {
voice-duration: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Uses the natural duration based on inherited voice-rate (default) |
time |
Specifies exact duration using time units (s, ms) |
Example: Setting Speech Duration
The following example sets a specific duration for speech synthesis −
<!DOCTYPE html>
<html>
<head>
<style>
.speech-text {
voice-duration: 5s;
voice-rate: normal;
}
.auto-duration {
voice-duration: auto;
voice-rate: slow;
}
</style>
</head>
<body>
<p class="speech-text">This paragraph will be spoken over exactly 5 seconds.</p>
<p class="auto-duration">This paragraph uses automatic duration based on voice rate.</p>
</body>
</html>
The first paragraph will be synthesized to speech over exactly 5 seconds regardless of content length. The second paragraph will use natural timing based on the slow voice rate setting.
Key Points
- The
autovalue calculates duration automatically based on the inheritedvoice-rateproperty - Time values override natural speech timing for precise synchronization
- This property is primarily used in assistive technologies and multimedia presentations
Conclusion
The voice-duration property provides control over speech synthesis timing. Use auto for natural timing or specify exact durations for precise multimedia synchronization.
Updated on: 2026-03-15T13:33:59+05:30
272 Views
Advertisements