La propiedad de reproducción durante CSS se utiliza para manipular el audio en reproducción en el fondo de cualquier sitio web. También se puede usar como melodía de fondo cuando agrega una conferencia o un discurso.
Sintaxis:
play-during: <uri>
Valor de propiedad: esta propiedad acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- url: este valor de propiedad contiene la fuente de la melodía de audio que se utilizará como melodía de fondo. Hay cuatro valores posibles para manipular la sintonización de audio, mezclar, repetir, automático y ninguno.
- mezcla: este valor de propiedad contiene el sonido de fondo del elemento que se va a reproducir, junto con cualquier sonido de fondo que resulte del valor de reproducción durante para cualquier elemento ancestro.
- repetir: este valor de propiedad mantiene el sonido de fondo para que se repita si finaliza antes de que el elemento se represente por completo.
- auto: el valor de esta propiedad describe el sonido que se reproduce para cualquier elemento antepasado.
- ninguno: el valor de esta propiedad describe el silencio de fondo completo durante la representación del elemento.
Ejemplo 1: En este ejemplo, la melodía de fondo se reproducirá una sola vez.
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3"
type="audio/mp3">
</audio>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, el fondo se reproducirá repetidamente.
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20190625153922/frog.mp3"
type="audio/mp3">
</audio>
</body>
</html>
Producción:
Navegadores compatibles: esta propiedad está obsoleta en CSS3, por lo que los principales navegadores no la admiten.
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA