CSS - play-during


The play-during property defines a sound to be played while rendering the element's content. This sound is also known as a "background sound."

Possible Values

  • uri − A single URI may be given, and it should resolve to a sound file. If it does not, then play-during is treated as though it had been set to auto.

  • mix − Causes the background sound of the element to be played, along with any background sound resulting from the value of play-during for any ancestor elements.

  • repeat − Causes the background sound to be repeated if it finishes before the element is fully rendered. If the value does not contain repeat, then the sound will only be played once.

  • auto − Any sound being played for any ancestor elements will continue to be heard, but no background sound will be produced by the current element.

  • none − Causes complete background silence during the rendering of the element. No background sound is played for the element, and any background sounds associated with ancestor elements are also muted.

DOM Syntax

object.style.playDuring = "mix";

Applies to

All the HTML elements


Here is the example −

<style type = "text/css">
      h1 {play-during: url(ocean-waves.wav) mix repeat;}
      a:link {play-during: none;}