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 play-during property
The CSS play-during property specifies a sound to be played as a background while an element's content is spoken. This property is part of the CSS Speech Module and is primarily used for screen readers and other assistive technologies.
Syntax
selector {
play-during: value;
}
Possible Values
| Value | Description |
|---|---|
URI |
The sound designated by this <uri> is played as a background while the element's content is spoken |
mix |
When present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the uri is mixed with it |
repeat |
When present, this keyword means that the sound will repeat if it is too short to fill the entire duration of the element |
auto |
The sound of the parent element continues to play |
none |
This keyword means that there is silence |
Example
The following example demonstrates how to use the play-during property to add background sounds to different elements −
<!DOCTYPE html>
<html>
<head>
<style>
blockquote.sad {
play-during: url("/sounds/violins.aiff");
background-color: #f0f0f0;
padding: 15px;
margin: 10px;
border-left: 4px solid #ccc;
}
blockquote q {
play-during: url("/sounds/harp.wav") mix;
font-style: italic;
color: #666;
}
span.quiet {
play-during: none;
background-color: #e8f4fd;
padding: 5px;
}
</style>
</head>
<body>
<blockquote class="sad">
This is a sad quote with violin background music.
<q>This nested quote will mix harp sounds with violins.</q>
</blockquote>
<span class="quiet">This text will have no background sound.</span>
</body>
</html>
The webpage displays a styled blockquote with gray background and a nested quote in italics, followed by a span with light blue background. When read by a screen reader or speech synthesizer, the blockquote would play violin sounds, the nested quote would mix harp sounds with the violins, and the span would be silent.
Note: The play-during property is not widely supported by modern browsers and is primarily intended for screen readers and speech synthesizers. The audio files referenced should be in a format supported by the user agent.
Conclusion
The play-during property allows you to create rich audio experiences for users relying on speech synthesis. While not commonly used in regular web development, it provides important accessibility features for screen readers.
Updated on: 2026-03-15T11:50:49+05:30
98 Views
Advertisements