El objeto Audio se utiliza para representar un elemento HTML <audio> .
El objeto de audio es un objeto nuevo en HTML5 .
Sintaxis:
- Para crear un elemento <audio>:
var gfg = document.createElement("AUDIO") - Para acceder a un elemento <audio>:
var x = document.getElementById("myAudio")
Valores de propiedad:
| Valor | Descripción |
|---|---|
| pistas de audio | Se utiliza para devolver un objeto AudioTrackList que representa las pistas de audio disponibles. |
| auto-reproducción | Se utiliza para configurar o devolver si el audio debe comenzar a reproducirse tan pronto como esté listo. |
| amortiguado | Se utiliza para devolver un objeto TimeRanges que representa las partes almacenadas en búfer de un audio. |
| controlador | Se utiliza para devolver el objeto MediaController que representa el controlador de medios actual de un audio. |
| control S | Se utiliza para configurar o devolver si un audio debe mostrar controles (reproducir/pausar, etc.). |
| origencruz | Se utiliza para establecer o devolver la configuración CORS de un audio. |
| fuente actual | Se utiliza para devolver la URL del audio actual. |
| tiempo actual | Se utiliza para establecer o devolver la posición de reproducción actual en un audio (en segundos). |
| por defecto silenciado | Se utiliza para configurar o devolver si el audio debe silenciarse de forma predeterminada. |
| tasa de reproducción predeterminada | Se utiliza para establecer o devolver si el campo de búsqueda es de solo lectura o no. |
| duración | Se utiliza para devolver la duración de un audio (en segundos). |
| terminó | Se utiliza para devolver si la reproducción del audio ha finalizado. |
| error | Se utiliza para devolver un objeto MediaError que representa el estado de error del audio. |
| círculo | Se utiliza para configurar o regresar si el audio debe comenzar a reproducirse nuevamente, cada vez que finaliza. |
| grupo de medios | Se utiliza para configurar o devolver el nombre del grupo de medios del que forman parte los audios. |
| apagado | Se utiliza para configurar o devolver si el sonido debe apagarse. |
| estado de la red | Se utiliza para devolver el estado de red actual de un audio. |
| en pausa | Se utiliza para configurar o devolver si un audio está en pausa. |
| tasa de reproducción | Se utiliza para configurar o devolver la velocidad de la reproducción de audio. |
| jugó | Se utiliza para devolver un objeto TimeRanges que representa las partes reproducidas del audio. |
| precarga | Se utiliza para configurar o devolver el valor del atributo de precarga de un audio. |
| listoestado | Se utiliza para configurar o devolver el estado listo actual de un audio. |
| buscable | Se utiliza para devolver un objeto TimeRanges que representa las partes buscables de un audio. |
| buscando | Se utiliza para devolver si el usuario está buscando actualmente en el audio. |
| origen | Se utiliza para configurar o devolver el valor del atributo src de un audio. |
| pistas de texto | Se utiliza para devolver un objeto TextTrackList que representa las pistas de texto disponibles. |
| volumen | Se utiliza para configurar o devolver el volumen de audio de un audio. |
Métodos de objetos de audio:
| Valor | Descripción |
|---|---|
| añadirPistaTexto() | Se utiliza para agregar una nueva pista de texto al audio. |
| canPlayType() | Se utiliza para comprobar si el navegador puede reproducir el tipo de audio especificado. |
| búsqueda rápida() | Se utiliza para buscar un tiempo específico en el reproductor de audio. |
| getStartDate() | Se utiliza para devolver un nuevo objeto de fecha, que representa el desplazamiento de la línea de tiempo actual. |
| carga() | Se utiliza para recargar el elemento de audio. |
| desempeñar() | Se utiliza para comenzar a reproducir el audio. |
| pausa() | Se utiliza para pausar el audio que se está reproduciendo actualmente. |
Los siguientes programas ilustran el objeto de audio:
Ejemplo-1: Creación de un elemento <audio>.
<!DOCTYPE html>
<html>
<head>
<title>Audio Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Audio Object</h2>
<p>Double Click the "Create"
button to create an Audio Object.</p>
<button ondblclick="Create()">
Create
</button>
<script>
function Create() {
// Create audio element.
var m = document.createElement(
"AUDIO");
if (m.canPlayType("audio/mpeg")) {
m.setAttribute("src", "bells.mp3");
} else {
m.setAttribute("src", "bells.ogg");
}
m.setAttribute("controls", "controls");
document.body.appendChild(m);
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Acceso a un elemento <audio>.
<!DOCTYPE html>
<html>
<head>
<title>Audio Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Audio Object</h2>
<audio id="track" controls>
<source src="bells.ogg" type="audio/ogg">
<source src="bells.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Double-click the "Access Audio" button
to get the duration of the audio, in seconds.</p>
<button onclick="access()">Access Audio</button>
<p id="test"></p>
<script>
function access() {
// Accessing audio element duration.
var m = document.getElementById(
"track").duration;
document.getElementById("test").innerHTML = m;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: El navegador compatible con HTML | Los objetos de audio DOM se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA