Las API de audio web ayudan a que el audio de una aplicación de sitio web suene correctamente. Los sonidos hacen que el sitio sea más divertido y atractivo. Con las API de audio, se pueden crear muchas aplicaciones de música o sonido. En este artículo, aprenderemos sobre audiocontext.close() junto con información básica sobre las API de audio.
Audio Context es un objeto que se utiliza para realizar diversas manipulaciones en el audio para el sitio web o la aplicación. Es una función preconstruida que se puede usar en varios navegadores como Google y Firefox. Antes de realizar cambios en cualquier audio, se debe almacenar la fuente del audio. Hay 3 tipos principales de fuentes de audio.
- Oscilador: se utiliza para producir sonidos calculados matemáticamente .
- Muestras de audio: para obtener audio de varios archivos
- Transmisión de audio: obtener audio de la cámara web o el micrófono
Después de que el audio se haya transmitido mediante el uso de cualquiera de las fuentes, se pueden enfatizar o atenuar las partes del audio mediante el uso de diferentes Nodes. Después de que se realizan las funciones del Node, el audio se conecta al destino y luego se reproduce el sonido. Algunos de los diferentes Nodes son Filter, ChannelSpiltterNode, AudioWorkletNode, etc.
AudioContext.close(): esta función de contexto de audio puede cerrar el contexto de audio y, por lo tanto, desconectar cualquier recurso de hardware asociado con el contenido de audio . es decir, la función ya no toma/da ninguna entrada al dispositivo de sonido. Pero el audio ya almacenado antes de usar close() puede manipularse. Esto es muy significativo en dispositivos de bajo consumo como los móviles. Si el contexto de audio permanece encendido, los recursos del dispositivo permanecen encendidos y, por lo tanto, provocan la pérdida de energía.
Sintaxis:
// Declaring audiocontext constructor
var audioContext=new AudioContext();
audioContext.close().then(function()
{.
.
. });
await audioContext.close()
Ejemplo: en el siguiente código, se crea una pequeña página HTML con 3 botones. Al hacer clic en cada botón se realizan las funciones respectivas relacionadas con el audio. En el ejemplo, el audio se puede iniciar y detener, es decir, reanudar. Tenga en cuenta que la reanudación es diferente de una parada, ya que reanudar el audio significa pausar temporalmente el audio y reiniciarlo desde donde se detuvo. Mientras que detener el audio usando close() elimina completamente el audio de los dispositivos de sonido y establece el estado como estado inicial.
Javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>states</title>
<link rel="stylesheet" href="" />
<style>
body {
background: lightcoral;
color: #323232;
font-weight: 300;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: Helvetica neue, roboto;
}
.button:hover {
background-color: aquamarine;
}
.btn-group .button {
background-color: bisque;
border: 1px solid black;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 150px;
display: block;
margin: 4px 2px;
}
.button:hover {
background-color: whitesmoke;
}
h1 {
font-weight: 200;
font-style: 26px;
margin: 10px;
}
</style>
</head>
<body>
<div class="btn-group">
<button id="start" class="button">
Start Audio
</button>
<button id="sus" class="button">
Suspend Audio
</button>
<button id="stop" class="button">
Stop Audio
</button>
<p>Current context time: No context exists.</p>
</div>
<script>
let AudioContext;
const start = document.getElementById("start");
const susres = document.getElementById("sus");
const stop = document.getElementById("stop");
const timeDisplay = document.querySelector("p");
susres.setAttribute("disabled", "disabled");
stop.setAttribute("disabled", "disabled");
start.onclick = function () {
start.setAttribute("disabled", "disabled");
susres.removeAttribute("disabled");
stop.removeAttribute("disabled");
// Create web audio api context
AudioContext = window.AudioContext
|| window.webkitAudioContext;
AudioContext = new AudioContext();
// Create Oscillator and filter
const oscillator = AudioContext.createOscillator();
const filter = AudioContext.createBiquadFilter();
// Connect oscillator to filter to speakers
oscillator.connect(filter);
filter.connect(AudioContext.destination);
// Make audio/noise
oscillator.type = "sine";
// hertz frequency
oscillator.frequency.value = 100;
oscillator.start(0);
};
// Suspend/resume the audiocontext,i.e,
// the audio can be played back
susres.onclick = function () {
if (AudioContext.state === "running") {
AudioContext.suspend().then(function () {
susres.textContent = "Resume Audio";
});
} else if (AudioContext.state === "suspended") {
AudioContext.resume().then(function () {
susres.textContent = "Suspend Audio";
});
}
};
// Close the audiocontext,i.e, the audio is
// completely stopped after the stop button
// is clicked by promise the audio resets
// the response to beginning state(Create Audio)
stop.onclick = function () {
AudioContext.close().then(function () {
start.removeAttribute("disabled");
susres.setAttribute("disabled", "disabled");
stop.setAttribute("disabled", "disabled");
});
};
function displayTime() {
if (AudioContext && AudioContext.state !== "closed")
{
timeDisplay.textContent = "audio time "
+ AudioContext.currentTime.toFixed(3);
}
else
{
timeDisplay.textContent = "Context not started";
}
requestAnimationFrame(displayTime);
}
displayTime();
</script>
</body>
</html>
Salida: el audio comienza al hacer clic en ‘Crear audio’, el audio puede detenerse temporalmente con ‘Suspender audio’ y volver a iniciarse sin lapso de tiempo ‘Reanudar audio’. El audio se detiene con ‘Detener audio’ usando Audiocontext.close()
Publicación traducida automáticamente
Artículo escrito por tedious_wings y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA