CSS voice-duration

The CSS voice-duration property is used in speech media for specifying how long it should take to render the selected element's content.

The voice-duration property can be useful for cases where you need to synchronize the speech with other media.

The time value provided to this property specifies how long the element's content should take to render. Note that this doesn't include any rests, pauses, or cues (they will be added to the duration).

Note that the voice-duration property takes precedence over the voice-rate property (unless auto is specified), and it can therefore be used to establish a speaking rate for the speech.

Also, when an element uses this property, its children cannot override its value (but only when the parent element has a non-auto value). So, even if its children explicitly set the voice-duration or voice-rate, these values are ignored (if the parent element uses a time value).

Syntax

Possible Values

auto

Resolves to a used value corresponding to the duration of the speech synthesis when using the inherited voice-rate.

time

This value specifies a value in absolute time units (for example, 5s, 750ms, etc). Only non-negative values are allowed.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Official Specifications

• CSS Speech Module Level 1

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.