Open In App

CSS play-during Property

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads