En Web API, existen objetos, propiedades y funciones muy útiles que se pueden usar para realizar pequeñas tareas, como acceder al DOM, y tareas complejas, como procesar audio y video. Las API comunes incluyen Canvas, Web Worker, History, Fetch, etc. ¡Echemos un vistazo a algunas API web poco comunes pero útiles!
Descripción general del texto completo:
API de audio web
API de pantalla completa
API de voz web
API de Bluetooth web API
de vibración API
de canal de transmisión
API de portapapeles
API de uso compartido web
La API de audio nos permite operar transmisiones de audio en la Web y se puede usar para agregar audio. fuentes en la Web Efectos y filtros. La fuente de audio puede provenir de <audio> , un archivo fuente de video/audio o una transmisión de red de audio.
Veamos un ejemplo:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Audio de demostración
</div>
<div class="web-api-card-body">
<div id="error" class="cerrar"></div>
<div>
<controles de audio src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Iniciar</button>
<button onclick="audioFromAudioFile.play()">Reproducir</button>
<button onclick="audioFromAudioFile.pause()">Pausa</button>
<button onclick="audioFromAudioFile.stop()">Detener</button>
</div>
<div>
<span>Vol: <input onchange="audioFromAudioFile.changeVolume()" tipo="range" id="vol" min="1" max="2" paso="0.01" valor="1" /></ lapso>
<span>Pan: <input onchange="audioFromAudioFile.changePan()" tipo="range" id="panner" min="-1" max="1" step="0.01" value="0" />< /lapso>
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
const l = consola.log
dejar audioFromAudioFile = (función() {
var contexto de audio
varvolNodo
varpannerNodo
var mediaFuente
función inicio() {
l("Inicio")
intentar {
audioContext = nuevo AudioContext()
fuente de medios = audioContext.createMediaElementSource (audio)
volNode = audioContext.createGain()
volNode.ganancia.valor = 1
pannerNode = nuevo StereoPannerNode(audioContext, { pan:0 })
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
atrapar(e) {
error.innerHTML = "Este dispositivo no es compatible con Web Audio API"
error.classList.remove("cerrar")
}
}
función reproducir() {
audio.reproducir()
}
función pausa() {
audio.pausa()
}
parada de función() {
audio.parada()
}
función cambiarVolumen() {
volNode.gain.value = este.valor
l("Rango de volumen:",este.valor)
}
función cambiarPan() {
pannerNode.gain.value = este.valor
l("Rango de panorámica:",este.valor)
}
devolver {
inicio,
jugar,
pausa,
detener,
cambiarPan,
cambiar volumen
}
})()
</script> Este ejemplo transfiere audio del elemento <audio> AudioContext . Los efectos de sonido (como la panorámica) se agregan a la fuente de audio antes de enviarse a la salida de audio (altavoz).
ButtonInit llama a la función init cuando se hace clic. Esto creará una instancia AudioContext y la configurará como audioContext . A continuación, crea una fuente de medios createMediaElementSource(audio) y pasa el elemento de audio como fuente de audio. El nodo de volumen volNode es creado por createGain y se puede utilizar para ajustar el volumen. Luego use StereoPannerNode para configurar el efecto de panorámica y finalmente conecte el nodo a la fuente de medios.
Haga clic en los botones (Reproducir, Pausa, Detener) para reproducir, pausar y detener el audio. La página tiene un control deslizante de volumen y rango de panorámica, y puede ajustar el volumen del audio y el efecto de panorámica deslizando el control deslizante.
Recursos relacionados:
La API de pantalla completa se utiliza para habilitar el modo de pantalla completa en la web. aplicaciones, que le permite ver la página/elemento en modo de pantalla completa. En los teléfonos Android, desborda la ventana del navegador y la barra de estado en la parte superior de Android (donde se muestra el estado de la red, el estado de la batería, etc.).
Método API de pantalla completa:
requestFullscreen : muestra el elemento seleccionado en modo de pantalla completa en el sistema, cerrando otras aplicaciones, así como los elementos de la interfaz de usuario del sistema y del navegador.exitFullscreen : sale del modo de pantalla completa y cambia al modo normal.Veamos un ejemplo común del uso del modo de pantalla completa para ver un vídeo:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Demostración en pantalla completa
</div>
<div class="web-api-card-body">
<div id="error" class="cerrar"></div>
<div>
Esta API hace posible el modo de pantalla completa de nuestra página web. Le permite seleccionar el elemento que desea ver en modo de pantalla completa, luego desactiva las funciones de la ventana del navegador, como la barra de URL y el panel de la ventana, y presenta el elemento para que tome todo el contenido. ancho y alto del sistema.
En los teléfonos Android, eliminará la ventana del navegador y la interfaz de usuario de Android donde se muestran el estado de la red y la batería, y mostrará el Elemento en todo el ancho del sistema Android.
</div>
<div class="video-etapa">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Pantalla completa</button>
</div>
<div>
Esta API hace posible el modo de pantalla completa de nuestra página web. Le permite seleccionar el elemento que desea ver en modo de pantalla completa, luego desactiva las funciones de la ventana del navegador, como la barra de URL y el panel de la ventana, y presenta el elemento para que tome todo el contenido. ancho y alto del sistema.
En los teléfonos Android, eliminará la ventana del navegador y la interfaz de usuario de Android donde se muestran el estado de la red y la batería, y mostrará el elemento en todo el ancho del sistema Android.
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
const l = consola.log
alternar función() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
si(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
demás {
documento.salirPantalla completa()
}
} demás {
error.innerHTML = "Este dispositivo no admite API de pantalla completa"
error.classList.remove("cerrar")
}
}
</script> Como puede ver, el elemento de video está en el elemento div#video-stage, con un botón Alternar pantalla completa.
Queremos que el elemento div#video-stage se muestre en pantalla completa cuando se hace clic en el botón para alternar entre pantalla completa. La implementación de la función toggle es la siguiente:
función alternar() {
const videoStageEl = document.querySelector(".video-stage")
si(!document.fullscreenElement)
videoStageEl.requestFullscreen()
demás
documento.salirPantalla completa()
} Aquí, querySelector se utiliza para encontrar div#video-stage y guardar su instancia HTMLDivElement en videoStageEl .
Luego, use la propiedad document.fullsreenElement para determinar si document está en pantalla completa, de modo que se pueda llamar requestFullscreen() en videoStageEl . Esto hará que div#video-stage ocupe toda la vista del dispositivo.
Si hace clic en el botón Alternar pantalla completa en el modo de pantalla completa, se llamará exitFullcreen en document , de modo que la vista de la interfaz de usuario volverá a la vista normal (salir de pantalla completa).
Recursos relacionados:
Web Speech API proporciona síntesis y reconocimiento de voz Funcionalidad agregada a aplicaciones web. Usando esta API podremos emitir comandos de voz a aplicaciones web, al igual que en Android a través de su Google Speech o usando Cortana en Windows.
Veamos un ejemplo simple usando Web Speech API para implementar texto a voz y voz a texto:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div id="error" class="cerrar"></div>
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Demostración: texto a voz
</div>
<div class="web-api-card-body">
<div>
<input placeholder="Ingrese texto aquí" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Toca para hablar</button>
</div>
</div>
</div>
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Demostración: voz a texto
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="El texto aparecerá aquí cuando empieces a hablar." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Toca y habla por el micrófono</button>
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
intentar {
var discurso = nuevo SpeechSynthesisUtterance()
var SpeechRecognition = Reconocimiento de voz;
reconocimiento var = nuevo SpeechRecognition()
} captura(e) {
error.innerHTML = "Este dispositivo no es compatible con Web Speech API"
error.classList.remove("cerrar")
}
función hablar() {
voz.texto = textToSpeech.valor
volumen.de.voz = 1
velocidad.de.voz=1
discurso.tono=1
ventana.speechSynthesis.speak(voz)
}
función tapToSpeak() {
reconocimiento.onstart = función() { }
reconocimiento.onresult = función (evento) {
const curr = evento.resultIndex
transcripción constante = evento.resultados[curr][0].transcripción
discursoToText.valor = transcripción
}
reconocimiento.onerror = función(ev) {
consola.error(ev)
}
reconocimiento.start()
}
</script> 
La primera demostración, Texto a voz, demuestra el uso de esta API con un campo de entrada simple que recibe texto de entrada y un botón para realizar operaciones de voz.
función hablar() {
discurso constante = nuevo SpeechSynthesisUtterance()
voz.texto = textToSpeech.valor
volumen.de.voz = 1
velocidad.de.voz = 1
discurso.tono = 1
ventana.speechSynthesis.speak(voz)
} Crea una instancia SpeechSynthesisUtterance() y establece el texto que se va a pronunciar a partir del texto ingresado en el cuadro de entrada. Luego, use el objeto speech para llamar SpeechSynthesis#speak para pronunciar el texto en el cuadro de entrada del altavoz.
La segunda demostración, Demostración: Voz a texto, reconoce la voz como texto. Haga clic en el botón Tocar y hablar por el micrófono y hable por el micrófono, y lo que digamos se traducirá al contenido del cuadro de entrada de texto.
Al hacer clic en el botón Tocar y hablar en el micrófono se llamará la función tapToSpeak:
function tapToSpeak() {
var SpeechRecognition = Reconocimiento de voz;
reconocimiento constante = nuevo SpeechRecognition()
reconocimiento.onstart = función() { }
reconocimiento.onresult = función (evento) {
const curr = evento.resultIndex
transcripción constante = evento.resultados[curr][0].transcripción
discursoToText.valor = transcripción
}
reconocimiento.onerror = función(ev) {
consola.error(ev)
}
reconocimiento.start()
} Aquí se crea SpeechRecognition y luego se registran los controladores de eventos y las devoluciones de llamada. Se llama onstart cuando se inicia el reconocimiento de voz onerror cuando ocurre un error. Siempre que el reconocimiento de voz captura una línea, se llama onresult .
En onresult , extraiga el contenido y configúrelo en textarea . Entonces, cuando hablamos por el micrófono, el texto aparece en textarea .
Recursos relacionados:
La API de Bluetooth nos permite acceder a dispositivos de bajo consumo en teléfonos móviles con dispositivos Bluetooth mejorados y usarlos para compartir datos desde una página web a otro dispositivo.
La API básica es navigator.bluetooth.requestDevice . Llamar a esto hará que el navegador le indique al usuario el selector de dispositivo, donde el usuario puede seleccionar un dispositivo o cancelar la solicitud. navigator.bluetooth.requestDevice requiere un objeto obligatorio. Este objeto define un filtro que devuelve dispositivos Bluetooth que coinciden con el filtro.
Veamos un ejemplo simple usando la API navigator.bluetooth.requestDevice para recuperar información básica del dispositivo desde un dispositivo BLE:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Demostración-Bluetooth
</div>
<div class="web-api-card-body">
<div id="error" class="cerrar"></div>
<div>
<div>Nombre del dispositivo: <span id="dname"></span></div>
<div>ID del dispositivo: <span id="did"></span></div>
<div>Dispositivo conectado: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Obtener dispositivo BLE</button>
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
función bluetoothAction(){
si(navegador.bluetooth) {
navegador.bluetooth.requestDevice({
aceptar todos los dispositivos: verdadero
}).entonces(dispositivo => {
nombre.innerHTML = nombre.dispositivo
did.innerHTML = dispositivo.id
dconnected.innerHTML = dispositivo.conectado
}).catch(err => {
error.innerHTML = "¡¡Dios mío!! Algo salió mal."
error.classList.remove("cerrar")
})
} demás {
error.innerHTML = "Bluetooth no es compatible."
error.classList.remove("cerrar")
}
}
</script> 
La información del dispositivo se mostrará aquí. Al hacer clic en el botón Obtener dispositivo BLE se llamará la función bluetoothAction :
function bluetoothAction(){
navegador.bluetooth.requestDevice({
aceptar todos los dispositivos: verdadero
}).entonces(dispositivo => {
nombre.innerHTML = nombre.dispositivo
did.innerHTML = dispositivo.id
dconnected.innerHTML = dispositivo.conectado
}).catch(err => {
console.error("¡¡Dios mío!! Algo salió mal. ")
})
} La función bluetoothAction llama navigator.bluetooth.requestDevice con acceptAllDevices：true , lo que hará que escanee y enumere todos los dispositivos activos Bluetooth cercanos. Devuelve una promise , así que resuélvela para obtener un parámetro de dispositivo de la función de devolución de llamada, este parámetro de dispositivo contendrá la información del dispositivo Bluetooth listado. Aquí es donde usamos sus propiedades para mostrar información en el dispositivo.
Recursos relacionados:
La API de vibración puede hacer que nuestro dispositivo vibre, como una A. forma en la que debemos responder a notificaciones o comentarios físicos de nuevos datos o información.
El método para realizar la vibración es navigator.vibrate(pattern) . pattern es un número único o una serie de números que describe un patrón de vibración.
Esto hará que el dispositivo deje de vibrar después de 200 milisegundos:
navigator.vibrate(200) navigator.vibrate([200])
Esto hará que el dispositivo vibre durante 200 ms, se detenga durante 300 ms y finalmente vibre durante 400 ms y se detenga:
navigator.vibrate([200, 300, 400])
se puede pasar a 0, [], [0,0,0] para eliminar la vibración.
Veamos un ejemplo sencillo:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Vibración de demostración
</div>
<div class="web-api-card-body">
<div id="error" class="cerrar"></div>
<div>
<input id="vibTime" type="number" placeholder="Tiempo de vibración" />
</div>
<div>
<botón onclick="vibrar()">Vibrar</botón>
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
si (navegador.vibrar) {
función vibrar() {
tiempo constante = vibTime.value
si(hora!= "")
navegador.vibrar(tiempo)
}
} demás {
error.innerHTML = "La API de vibración no es compatible con este dispositivo."
error.classList.remove("cerrar")
}
</script> Aquí hay un cuadro de entrada y un botón. Ingrese la duración de la vibración en el cuadro de entrada y presione el botón. Nuestro dispositivo vibrará durante el tiempo ingresado.
Recursos relacionados:
La API de canal de transmisión permite diferentes navegaciones desde el mismo origen El contexto comunica mensajes o datos. Entre ellos, el contexto de navegación se refiere a ventanas, pestañas, iframes, trabajadores, etc.
BroadcastChannel se utiliza para crear o unirse a un canal:
const politicsChannel = new BroadcastChannel("política") politics es el nombre del canal. Cualquier contexto que inicialice BroadcastChannel usando politics se unirá al canal politics . Recibirá cualquier mensaje. enviados en el canal.
Si es el primer constructor BroadcastChannel con politics , se creará el canal. Puede utilizar BroadcastChannel.postMessage API para publicar mensajes en un canal. Utilice la API BroadcastChannel.onmessage para suscribirse a los mensajes del canal.
Veamos una aplicación de chat sencilla:
<cuerpo>
<encabezado>
<h2>API web<h2>
</encabezado>
<div class="web-api-cnt">
<div class="tarjeta-api-web">
<div class="web-api-card-head">
Canal de transmisión de demostración
</div>
<div class="web-api-card-body">
<div class="page-info">Abra esta página en otra <i>pestaña</i>, <i>ventana</i> o <i>iframe</i> para chatear con ellos.</div>
<div id="error" class="cerrar"></div>
<div id="displayMsg" style="font-size:19px;text-align:left;">
</div>
<div class="chatArea">
<input id="input" type="text" placeholder="Escribe tu mensaje" />
<button onclick="sendMsg()">Enviar mensaje al canal</button>
</div>
</div>
</div>
</div>
</cuerpo>
<guión>
const l = consola.log;
intentar {
var canalpolítica = nuevo canal de transmisión("política")
politicaChannel.onmessage = onMessage
var ID de usuario = Fecha.ahora()
} captura(e) {
error.innerHTML = "La API BroadcastChannel no es compatible con este dispositivo."
error.classList.remove("cerrar")
}
input.addEventListener ("tecla pulsada", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
enviar mensaje()
}
})
función enMensaje(e) {
constante {msj,id}=e.datos
const newHTML = "<div class='chat-msg'><span><i>"+id+"</i>: "+msg+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + nuevoHTML
displayMsg.scrollTop = displayMsg.scrollHeight
}
función enviar mensaje() {
políticaChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Yo</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + nuevoHTML
entrada.valor = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Aquí hay un texto y un botón simples. Ingresa tu mensaje y presiona el botón para enviarlo. Lo siguiente inicializa politicalChannel y configura un detector de eventos onmessage en politicalChannel para que pueda recibir y mostrar mensajes.
Al hacer clic en el botón se llamará la función sendMsg . Envía mensajes al canal politics a través de BroadcastChannel#postMessage . Cualquier pestaña, iframe o trabajador que inicialice este script recibirá mensajes enviados desde aquí, por lo que esta página recibirá mensajes enviados desde otros contextos. Recursos relacionados:
Las operaciones del portapapeles, como copiar, cortar y pegar, son aplicaciones. Algunas de las características más comunes en . La API del Portapapeles permite a los usuarios web acceder al portapapeles del sistema y realizar operaciones básicas con el portapapeles.
Anteriormente, era posible utilizar document.execCommand para interactuar con el portapapeles del sistema. La moderna API asíncrona del portapapeles proporciona acceso directo para leer y escribir el contenido del portapapeles.
Leer contenido del portapapeles:
navigator.clipboard.readText().then(clipText =>
document.getElementById("caja de salida").innerText = clipText
); Escribir contenido en el portapapeles:
función actualizarClipboard(newClip) {
navigator.clipboard.writeText(nuevoClip).luego(función() {
/* portapapeles configurado exitosamente */
}, función() {
/* Error al escribir en el portapapeles */
});
} Recursos relacionados:
Share API puede ayudarnos a implementar funciones para compartir en aplicaciones web. Da una sensación de compartir nativa de dispositivos móviles. Permite compartir texto, archivos y enlaces a otras aplicaciones en su dispositivo.
Se puede acceder a la API Web Share a través navigator.share :
if (navigator.share) {
navegador.compartir({
título: 'Baidu',
texto: 'Baidu',
URL: '<https://www.baidu.com/>',
})
.then(() => console.log('Compartir correctamente'))
.catch((error) => console.log('Error al compartir', error));
} El código anterior implementa el uso compartido de texto utilizando JavaScript nativo. Tenga en cuenta que solo podemos llamar a esta operación usando el evento onclick :
function Share({ label, text, title }) {
const shareDetails = {título, texto};
const handleSharing = async () => {
si (navegador.compartir) {
intentar {
espere navigator.share(shareDetails).luego(() => console.log("Enviado"));
} captura (error) {
console.log(`¡Ups! No pude compartirlo con el mundo porque: ${error}`);
}
} demás {
// código de reserva
consola.log(
"Actualmente no se admite el uso compartido de web en este navegador. Proporcione una devolución de llamada"
);
}
};
devolver (
<botón onClick={handleSharing}>
<span>{etiqueta}</span>
</botón>
);
} Recursos relacionados: