The CSS play-during property is used to manipulate the playing audio in the background of any website. It can also be used as a background tune when you add a lecture or speech.
Syntax:
play-during: <uri>
Property Value: This property accepts a single parameter as mentioned above and described below:
- url: This property value holds the source for the audio tune which will be used as a background tune. There are four possible values to manipulate the audio tune, mix, repeat, auto, and none.
- mix: This property value holds the background sound of the element that to be played, along with any background sound resulting from the value of play-during for any ancestor elements.
- repeat: This property value holds the background sound to be repeated if it finishes before the element is fully rendered.
- auto: This property value describe the sound being played for any ancestor element.
- none: This property value describe the complete background silence during the rendering of the element.
Example 1: In this example, the background tune will play a single time.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
audio {
play-during: url("flute.wav") none;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< p >CSS play-during Property</ p >
< audio controls>
< source src =
type = "audio/mp3" >
</ audio >
</ body >
</ html >
|
Output:
Example 2: In this example, background will play repeatedly.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
audio {
play-during: url("flute.wav") repeat;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green;" >GeeksforGeeks</ h1 >
< p >CSS play-during Property</ p >
< audio controls>
< source src =
type = "audio/mp3" >
</ audio >
</ body >
</ html >
|
Output:
Supported Browsers: This property is deprecated in CSS3 so the major browsers are not supporting this property.
Last Updated :
07 Jan, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...