Na API Web, existem objetos, propriedades e funções muito úteis que podem ser usados para realizar pequenas tarefas, como acessar o DOM, até tarefas complexas, como processamento de áudio e vídeo. APIs comuns incluem Canvas, Web Worker, History, Fetch, etc. Vamos dar uma olhada em algumas APIs da Web incomuns, mas úteis!
Visão geral do texto completo:
API de áudio da Web
API de tela cheia
API de fala da Web
API de Bluetooth da Web API
de vibração API
de canal de transmissão
de transferência API
de compartilhamento de Web
A API de áudio nos permite operar fluxos de áudio na Web e pode ser usada para adicionar áudio fontes na Web Efeitos e filtros. A fonte de áudio pode vir de <audio> , um arquivo de origem de vídeo/áudio ou um fluxo de rede de áudio.
Vejamos um exemplo:
<corpo>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Áudio de demonstração
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<controles de áudio src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Iniciar</button>
<button onclick="audioFromAudioFile.play()">Reproduzir</button>
<button onclick="audioFromAudioFile.pause()">Pausar</button>
<button onclick="audioFromAudioFile.stop()">Parar</button>
</div>
<div>
<span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></ período>
<span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" />< /span>
</div>
</div>
</div>
</div>
</body>
<roteiro>
const l = console.log
deixe audioFromAudioFile = (function() {
var audioContext
varvolNode
varpannerNode
var mediaSource
função inicialização() {
l("Iniciar")
tentar {
audioContext = novo AudioContext()
mediaSource = audioContext.createMediaElementSource(áudio)
volNode=audioContext.createGain()
volNode.ganho.valor = 1
pannerNode = novo StereoPannerNode(audioContext, { pan:0 })
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
pegar (e) {
error.innerHTML = "Este dispositivo não suporta Web Audio API"
error.classList.remove("fechar")
}
}
função jogar() {
áudio.play()
}
função pausa() {
áudio.pausa()
}
função parar() {
áudio.parar()
}
função alterarVolume() {
volNode.gain.value = este.valor
l("Intervalo Vol:",este.valor)
}
função alterarPan() {
pannerNode.gain.value = este.valor
l("Intervalo panorâmico:",este.valor)
}
retornar {
iniciar,
jogar,
pausa,
parar,
mudarPan,
alterarVolume
}
})()
</script> Este exemplo transfere o áudio do elemento <audio> para AudioContext . Os efeitos sonoros (como panorâmica) são adicionados à fonte de áudio antes de serem enviados para a saída de áudio (alto-falante).
ButtonInit chama a função init quando clicado. Isso criará uma instância AudioContext e a definirá como audioContext . Em seguida, ele cria uma fonte de mídia createMediaElementSource(audio) , passando o elemento audio como fonte de áudio. O nó de volume volNode é criado por createGain e pode ser usado para ajustar o volume. Em seguida, use StereoPannerNode para configurar o efeito panorâmico e, finalmente, conecte o nó à fonte de mídia.
Clique nos botões (Play, Pause, Stop) para reproduzir, pausar e parar o áudio. A página possui um controle deslizante de volume e alcance panorâmico, e você pode ajustar o volume do áudio e o efeito panorâmico deslizando o controle deslizante.
Recursos relacionados:
A API de tela cheia é usada para ativar o modo de tela inteira na web aplicativos, que permite visualizar a página/elemento em modo de tela cheia. Em telefones Android, ele transborda a janela do navegador e a barra de status na parte superior do Android (onde são mostrados o status da rede, o status da bateria, etc.).
Método API de tela cheia:
requestFullscreen : exibe o elemento selecionado em modo de tela inteira no sistema, fechando outros aplicativos, bem como elementos do navegador e da interface do sistema.exitFullscreen : Sai do modo de tela inteira e muda para o modo normal.Vejamos um exemplo comum de uso do modo de tela inteira para assistir a um vídeo:
<body>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demonstração em tela cheia
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
Esta API torna possível o modo de tela cheia de nossa página da web. Ela permite que você selecione o Elemento que deseja visualizar no modo de tela cheia e, em seguida, desativa os recursos da janela do navegador, como a barra de URL, o painel da janela e apresenta o Elemento para pegar o todo. largura e altura do sistema.
Em telefones Android, ele removerá a janela do navegador e a UI do Android onde o status da rede e da bateria são exibidos e exibirá o Elemento em toda a largura do sistema Android.
</div>
<div class="estágio de vídeo">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Tela Cheia</button>
</div>
<div>
Esta API torna possível o modo de tela cheia de nossa página da web. Ela permite que você selecione o Elemento que deseja visualizar no modo de tela cheia e, em seguida, desativa os recursos da janela do navegador, como a barra de URL, o painel da janela e apresenta o Elemento para pegar o todo. largura e altura do sistema.
Em telefones Android, ele removerá a janela do navegador e a UI do Android onde o status da rede e da bateria são exibidos e exibirá o Elemento em toda a largura do sistema Android.
</div>
</div>
</div>
</div>
</body>
<roteiro>
const l=console.log
função alternar() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
outro {
documento.exitFullscreen()
}
} outro {
error.innerHTML = "Este dispositivo não suporta API Fullscreen"
error.classList.remove("fechar")
}
}
</script> Como você pode ver, o elemento video está no elemento div#video-stage, com um botão Alternar tela cheia.
Queremos que o elemento div#video-stage seja exibido em tela inteira quando o botão for clicado para alternar para tela inteira. A implementação da função toggle é a seguinte:
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestFullscreen()
outro
documento.exitFullscreen()
} Aqui, querySelector é usado para localizar div#video-stage e salvar sua instância HTMLDivElement em videoStageEl .
Em seguida, use a propriedade document.fullsreenElement para determinar se document está em tela cheia, para que requestFullscreen() possa ser chamado em videoStageEl . Isso fará com que div#video-stage ocupe toda a visualização do dispositivo.
Se você clicar no botão Alternar tela inteira no modo de tela inteira, exitFullcreen será chamado no document , para que a visualização da IU retorne à visualização normal (sair da tela inteira).
Recursos relacionados:
Web Speech API fornece síntese de fala e reconhecimento de fala Funcionalidade adicionada para aplicações web. Usando esta API poderemos emitir comandos de voz para aplicações web, assim como no Android através do Google Speech ou usando a Cortana no Windows.
Vejamos um exemplo simples usando a Web Speech API para implementar conversão de texto em fala e fala em texto:
<body>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div id="error" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Demonstração - Texto para fala
</div>
<div class="web-api-card-body">
<div>
<input placeholder="Digite o texto aqui" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Toque para falar</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Demonstração - Fala para Texto
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="O texto aparecerá aqui quando você começar a falar." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Toque e fale no microfone</button>
</div>
</div>
</div>
</div>
</body>
<roteiro>
tentar {
var discurso = novo SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var reconhecimento = novo SpeechRecognition()
} pegar(e) {
error.innerHTML = "Este dispositivo não suporta Web Speech API"
error.classList.remove("fechar")
}
função falar() {
fala.text = textToSpeech.value
fala.volume = 1
discurso.rate=1
discurso.pitch=1
janela.speechSynthesis.speak(fala)
}
função tapToSpeak() {
reconhecimento.onstart = function() { }
reconhecimento.onresult=função(evento){
const curr = event.resultIndex
transcrição const = event.results[curr][0].transcript
discursoToText.value = transcrição
}
reconhecimento.onerror = function(ev) {
console.error(ev)
}
reconhecimento.start()
}
</script> 
A primeira demonstração - Text to Speech demonstra o uso desta API com um campo de entrada simples que recebe texto de entrada e um botão para realizar operações de fala.
função falar() {
const discurso = novo SpeechSynthesisUtterance()
fala.text = textToSpeech.value
fala.volume = 1
taxa de fala = 1
discurso.pitch = 1
janela.speechSynthesis.speak(fala)
} Ele instancia SpeechSynthesisUtterance() e define o texto a ser falado a partir do texto inserido na caixa de entrada. Em seguida, use o objeto speech para chamar SpeechSynthesis#speak para falar o texto na caixa de entrada do alto-falante.
A segunda demonstração Demo - Speech to Text reconhece a fala como texto. Clique no botão Tap and Speak into Mic e fale no microfone, e o que dissermos será traduzido no conteúdo da caixa de entrada de texto.
Clicar no botão Tap and Speak into Mic chamará a função tapToSpeak:
function tapToSpeak() {
var SpeechRecognition = SpeechRecognition;
reconhecimento const = novo SpeechRecognition()
reconhecimento.onstart = function() { }
reconhecimento.onresult=função(evento){
const curr = event.resultIndex
transcrição const = event.results[curr][0].transcript
discursoToText.value = transcrição
}
reconhecimento.onerror = function(ev) {
console.error(ev)
}
reconhecimento.start()
} Aqui SpeechRecognition é instanciado e então os manipuladores de eventos e retornos de chamada são registrados. onstart é chamado quando o reconhecimento de fala é iniciado onerror é chamado quando ocorre um erro. Sempre que o reconhecimento de fala captura uma linha, onresult é chamado.
No retorno de chamada onresult , extraia o conteúdo e coloque-o textarea . Assim, quando falamos no microfone, o texto aparece no conteúdo textarea .
Recursos relacionados:
A API Bluetooth nos permite acessar dispositivos de baixo consumo de energia em telefones celulares dispositivo com Bluetooth aprimorado e usá-lo para compartilhar dados de uma página da web para outro dispositivo.
A API básica é navigator.bluetooth.requestDevice . Chamar isso fará com que o navegador avise ao usuário o seletor de dispositivo, onde o usuário pode selecionar um dispositivo ou cancelar a solicitação. navigator.bluetooth.requestDevice requer um objeto obrigatório. Este objeto define um filtro que retorna dispositivos Bluetooth que correspondem ao filtro.
Vejamos um exemplo simples usando a API navigator.bluetooth.requestDevice para recuperar informações básicas de um dispositivo BLE:
<body>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Bluetooth
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<div>Nome do dispositivo: <span id="dname"></span></div>
<div>ID do dispositivo: <span id="did"></span></div>
<div>Dispositivo conectado: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Obter dispositivo BLE</button>
</div>
</div>
</div>
</div>
</body>
<roteiro>
função bluetoothAction(){
if(navegador.bluetooth) {
navegador.bluetooth.requestDevice({
aceitarAllDevices: verdadeiro
}).then(dispositivo => {
dname.innerHTML = dispositivo.nome
did.innerHTML = dispositivo.id
dconnected.innerHTML = dispositivo.conectado
}).catch(err => {
error.innerHTML = "Nossa!! Algo deu errado."
error.classList.remove("fechar")
})
} outro {
error.innerHTML = "Bluetooth não é suportado."
error.classList.remove("fechar")
}
}
</script> 
As informações do dispositivo serão exibidas aqui. Clicar no botão Obter dispositivo BLE chamará a função bluetoothAction :
function bluetoothAction(){
navegador.bluetooth.requestDevice({
aceitarAllDevices: verdadeiro
}).then(dispositivo => {
dname.innerHTML = dispositivo.nome
did.innerHTML = dispositivo.id
dconnected.innerHTML = dispositivo.conectado
}).catch(err => {
console.error("Nossa!! Algo deu errado.")
})
} A função bluetoothAction chama navigator.bluetooth.requestDevice com acceptAllDevices：true , o que fará com que ela verifique e liste todos os dispositivos Bluetooth ativos próximos. Ele retorna uma promise , então resolva-o para obter um parâmetro device da função de retorno de chamada, este parâmetro do dispositivo conterá as informações do dispositivo Bluetooth listado. É aqui que usamos suas propriedades para exibir informações no dispositivo.
Recursos relacionados:
A API de vibração pode fazer nosso dispositivo vibrar, como um A forma como devemos responder a notificações ou feedback físico de novos dados ou informações.
O método para realizar a vibração é navigator.vibrate(pattern) . pattern é um único número ou uma série de números que descreve um padrão de vibração.
Isso fará com que o dispositivo pare de vibrar após 200 milissegundos:
navigator.vibrate(200) navigator.vibrate([200])
Isso fará com que o dispositivo vibre por 200 ms, pause por 300 ms e, finalmente, vibre por 400 ms e pare:
navigator.vibrate([200, 300, 400])
pode ser passado 0, [], [0,0,0] para eliminar a vibração.
Vejamos um exemplo simples:
<body>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Vibração
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<input id="vibTime" type="number" placeholder="Tempo de vibração" />
</div>
<div>
<button onclick="vibrate()">Vibrar</button>
</div>
</div>
</div>
</div>
</body>
<roteiro>
if(navegador.vibrate) {
função vibrar() {
tempo const = vibTime.value
if(hora!= "")
navegador.vibrate(tempo)
}
} outro {
error.innerHTML = "API Vibrate não suportada neste dispositivo."
error.classList.remove("fechar")
}
</script> Há uma caixa de entrada e um botão aqui. Insira a duração da vibração na caixa de entrada e pressione o botão. Nosso dispositivo vibrará durante o tempo inserido.
Recursos relacionados:
A API Broadcast Channel permite navegação diferente da mesma origem O contexto comunica mensagens ou dados. Entre eles, o contexto de navegação refere-se a janelas, abas, iframes, trabalhadores, etc.
BroadcastChannel é usada para criar ou ingressar em um canal:
const PoliticalChannel = new BroadcastChannel("política") politics é o nome do canal. Qualquer contexto que inicialize BroadcastChannel usando politics ingressará no canal politics . Ele receberá quaisquer mensagens. enviadas no canal e podem enviar mensagens para o canal.
Se for o primeiro construtor BroadcastChannel com politics , o canal será criado. Você pode usar BroadcastChannel.postMessage API para postar mensagens em um canal. Use a API BroadcastChannel.onmessage para assinar mensagens do canal.
Vejamos um aplicativo de bate-papo simples:
<body>
<cabeçalho>
<h2>APIs da Web<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Canal de transmissão de demonstração
</div>
<div class="web-api-card-body">
<div class="page-info">Abra esta página em outra <i>guia</i>, <i>janela</i> ou <i>iframe</i> para conversar com eles.</div>
<div id="error" class="close"></div>
<div id="displayMsg" style="font-size:19px;text-align:left;">
</div>
<div class="chatArea">
<input id="input" type="text" placeholder="Digite sua mensagem" />
<button onclick="sendMsg()">Enviar mensagem para o canal</button>
</div>
</div>
</div>
</div>
</body>
<roteiro>
const l = console.log;
tentar {
var políticaChannel = new BroadcastChannel("política")
políticaChannel.onmessage = onMessage
var userId = Date.now()
} pegar(e) {
error.innerHTML = "API BroadcastChannel não suportada neste dispositivo."
error.classList.remove("fechar")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
enviarMsg()
}
})
function onMessage(e) {
const {msg,id}=e.data
const newHTML = "<div class='chat-msg'><span><i>"+id+"</i>: "+msg+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + novoHTML
displayMsg.scrollTop = displayMsg.scrollHeight
}
função enviarMsg() {
políticaChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Eu</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + novoHTML
entrada.valor = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Aqui está um texto simples e um botão. Digite sua mensagem e pressione o botão para enviá-la. O seguinte inicializa politicalChannel e define um ouvinte de evento onmessage no politicalChannel para que ele possa receber e exibir mensagens.
Clicar no botão chamará a função sendMsg . Ele envia mensagens para o canal politics por meio BroadcastChannel#postMessage . Qualquer aba, iframe ou trabalhador que inicialize este script receberá mensagens enviadas daqui, portanto esta página receberá mensagens enviadas de outros contextos. Recursos relacionados:
As operações da área de transferência, como copiar, recortar e colar, são aplicativos Alguns dos recursos mais comuns em . A API Clipboard permite que os usuários da web acessem a área de transferência do sistema e executem operações básicas da área de transferência.
Anteriormente, era possível usar document.execCommand para interagir com a área de transferência do sistema. A moderna API assíncrona da área de transferência fornece acesso direto para ler e gravar o conteúdo da área de transferência.
Leia o conteúdo da área de transferência:
navigator.clipboard.readText().then(clipText =>
document.getElementById("caixa de saída").innerText = clipText
); Grave conteúdo na área de transferência:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* área de transferência definida com sucesso */
}, função() {
/* falha na gravação da área de transferência */
});
} Recursos relacionados:
A API de compartilhamento pode nos ajudar a implementar funções de compartilhamento em aplicativos da web. Dá uma sensação de compartilhamento nativo para dispositivos móveis. Torna possível compartilhar textos, arquivos e links para outros aplicativos do seu dispositivo.
A API Web Share pode ser acessada através navigator.share :
if (navigator.share) {
navegador.share({
título: 'Baidu',
texto: 'Baidu',
url: '<https://www.baidu.com/>',
})
.then(() => console.log('Compartilhamento bem-sucedido'))
.catch((erro) => console.log('Falha no compartilhamento', erro));
} O código acima implementa o compartilhamento de texto usando JavaScript nativo. Observe que só podemos chamar esta operação usando o evento onclick :
function Share({ label, text, title }) {
const shareDetails = {título, texto};
const handleSharing=async()=>{
if (navigator.share) {
tentar {
aguarde navigator.share(shareDetails).then(() => console.log("Enviado"));
} pegar (erro) {
console.log(`Opa! Não consegui compartilhar com o mundo porque: ${error}`);
}
} outro {
//código substituto
console.log(
"Atualmente, o compartilhamento da Web não é compatível com este navegador. Forneça um retorno de chamada"
);
}
};
retornar (
<botão onClick={handleSharing}>
<span>{rótulo}</span>
</button>
);
} Recursos relacionados: