Dans l'API Web, il existe des objets, propriétés et fonctions très utiles qui peuvent être utilisés pour effectuer de petites tâches telles que l'accès au DOM, ou des tâches complexes telles que le traitement audio et vidéo. Les API courantes incluent Canvas, Web Worker, History, Fetch, etc. Jetons un coup d'œil à quelques API Web peu courantes mais utiles !
Présentation du texte intégral :
API Web Audio
API plein écran API
Web Speech API
Web Bluetooth API
de vibration API
de canal de diffusion API
de presse-papiers
API de partage Web
L'API audio nous permet d'exploiter des flux audio sur le Web et peut être utilisée pour ajouter de l'audio. sources sur les effets Web et les filtres. La source audio peut provenir de <audio> , d’un fichier source vidéo/audio ou d’un flux réseau audio.
Regardons un exemple :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Démo-Audio
</div>
<div class="web-api-card-body">
<div id="erreur" class="fermer"></div>
<div>
<contrôles audio src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Init</button>
<button onclick="audioFromAudioFile.play()">Jouer</button>
<button onclick="audioFromAudioFile.pause()">Pause</button>
<button onclick="audioFromAudioFile.stop()">Arrêter</button>
</div>
<div>
<span>Vol : <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></ durée>
<span>Pan : <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" />< /envergure>
</div>
</div>
</div>
</div>
</corps>
<script>
const l = console.log
laissez audioFromAudioFile = (function() {
varcontextaudio
varvolNoeud
varpannerNoeud
var source média
fonction init() {
l("Init")
essayer {
audioContext = nouveau AudioContext()
mediaSource = audioContext.createMediaElementSource(audio)
volNode = audioContext.createGain()
volNode.gain.value = 1
pannerNode = nouveau StereoPannerNode (audioContext, { pan:0 })
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
capture(e) {
error.innerHTML = "Cet appareil ne prend pas en charge l'API Web Audio"
erreur.classList.remove("fermer")
}
}
fonction jouer() {
audio.play()
}
fonction pause() {
audio.pause()
}
fonction stop() {
audio.stop()
}
fonction changementVolume() {
volNode.gain.value = this.value
l("Plage de Vol :",this.value)
}
fonction changePan() {
pannerNode.gain.value = this.value
l("Plage panoramique :",this.value)
}
retour {
initialisation,
jouer,
pause,
arrêt,
changer de casserole,
changerVolume
}
})()
</script> Cet exemple transfère l'audio de l'élément <audio> vers AudioContext . Les effets sonores (tels que le panoramique) sont ajoutés à la source audio avant d'être émis vers la sortie audio (haut-parleur).
ButtonInit appelle la fonction init lorsque vous cliquez dessus. Cela créera une instance AudioContext et la définira comme audioContext . Ensuite, il crée une source multimédia createMediaElementSource(audio) , en passant l'élément audio comme source audio. Le nœud de volume volNode est créé par createGain et peut être utilisé pour régler le volume. Utilisez ensuite StereoPannerNode pour configurer l'effet de panoramique et enfin connectez le nœud à la source multimédia.
Cliquez sur les boutons (Lecture, Pause, Arrêter) pour lire, mettre en pause et arrêter l'audio. La page comporte un curseur de volume et de plage panoramique, et vous pouvez régler le volume audio et l'effet panoramique en faisant glisser le curseur.
Ressources associées :
L'API plein écran est utilisée pour activer le mode plein écran dans le Web. applications , qui vous permet de visualiser la page/l'élément en mode plein écran. Sur les téléphones Android, il déborde de la fenêtre du navigateur et de la barre d'état en haut d'Android (où sont affichés l'état du réseau, l'état de la batterie, etc.).
Méthode API plein écran :
requestFullscreen : Affiche l'élément sélectionné en mode plein écran sur le système, fermant les autres applications ainsi que les éléments du navigateur et de l'interface utilisateur du système.exitFullscreen : Quittez le mode plein écran et passez en mode normal.Examinons un exemple courant d'utilisation du mode plein écran pour regarder une vidéo :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Démo-Plein écran
</div>
<div class="web-api-card-body">
<div id="erreur" class="fermer"></div>
<div>
Cette API rend possible le mode plein écran de notre page Web. Elle vous permet de sélectionner l'élément que vous souhaitez afficher en mode plein écran, puis elle ferme les fonctionnalités de la fenêtre du navigateur telles que la barre d'URL, le volet de la fenêtre et présente l'élément pour prendre l'intégralité. largeur et hauteur du système.
Sur les téléphones Android, cela supprimera la fenêtre du navigateur et l'interface utilisateur Android où l'état du réseau et l'état de la batterie sont affichés, et affichera l'élément dans toute la largeur du système Android.
</div>
<div class="vidéo-stage">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Plein écran</button>
</div>
<div>
Cette API rend possible le mode plein écran de notre page Web. Elle vous permet de sélectionner l'élément que vous souhaitez afficher en mode plein écran, puis elle ferme les fonctionnalités de la fenêtre du navigateur telles que la barre d'URL, le volet de la fenêtre et présente l'élément pour prendre l'intégralité. largeur et hauteur du système.
Sur les téléphones Android, cela supprimera la fenêtre du navigateur et l'interface utilisateur Android où l'état du réseau et l'état de la batterie sont affichés, et affichera l'élément dans toute la largeur du système Android.
</div>
</div>
</div>
</div>
</corps>
<script>
const l = console.log
fonction bascule() {
const videoStageEl = document.querySelector(".video-stage")
si (videoStageEl.requestFullscreen) {
si(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
autre {
document.exitFullscreen()
}
} autre {
error.innerHTML = "Cet appareil ne prend pas en charge l'API plein écran"
erreur.classList.remove("fermer")
}
}
</script> Comme vous pouvez le voir, l'élément vidéo est dans l'élément div#video-stage, avec un bouton Basculer en plein écran.
Nous voulons que l'élément div#video-stage s'affiche en plein écran lorsque l'on clique sur le bouton pour basculer en plein écran. L'implémentation de la fonction toggle est la suivante :
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
si(!document.fullscreenElement)
videoStageEl.requestFullscreen()
autre
document.exitFullscreen()
} Ici, querySelector est utilisé pour rechercher div#video-stage et enregistrer son instance HTMLDivElement sur videoStageEl .
Ensuite, utilisez la propriété document.fullsreenElement pour déterminer si document est en plein écran, afin que requestFullscreen() puisse être appelé sur videoStageEl . Cela fera que div#video-stage occupera toute la vue de l'appareil.
Si vous cliquez sur le bouton Basculer vers le plein écran en mode plein écran, exitFullcreen sera appelé sur document , de sorte que la vue de l'interface utilisateur reviendra à la vue normale (quitte le plein écran).
Ressources associées :
L'API Web Speech fournit une synthèse vocale et une reconnaissance vocale Fonctionnalité ajoutée aux applications Web. Grâce à cette API, nous pourrons émettre des commandes vocales vers des applications Web, tout comme sur Android via son Google Speech ou en utilisant Cortana sous Windows.
Examinons un exemple simple utilisant l'API Web Speech pour implémenter la synthèse vocale et la synthèse vocale :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div id="erreur" class="fermer"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Démo - Synthèse vocale
</div>
<div class="web-api-card-body">
<div>
<input placeholder="Entrez le texte ici" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Appuyez pour parler</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Démo - Parole en texte
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="Le texte apparaîtra ici lorsque vous commencerez à parler." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Appuyez et parlez dans le micro</button>
</div>
</div>
</div>
</div>
</corps>
<script>
essayer {
var discours = nouveau SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var reconnaissance = new SpeechRecognition()
} attraper(e) {
error.innerHTML = "Cet appareil ne prend pas en charge l'API Web Speech"
erreur.classList.remove("fermer")
}
fonction parler() {
discours.text = texteVersSpeech.value
discours.volume = 1
discours.rate=1
discours.pitch=1
window.speechSynthesis.speak(parole)
}
fonction tapToSpeak() {
reconnaissance.onstart = function() { }
reconnaissance.onresult = fonction (événement) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = transcription
}
reconnaissance.onerror = fonction (ev) {
console.erreur(ev)
}
reconnaissance.start()
}
</script> 
La première démo - Text to Speech démontre l'utilisation de cette API avec un simple champ de saisie qui reçoit le texte de saisie et un bouton pour effectuer des opérations vocales.
fonction parler() {
const discours = nouveau SpeechSynthesisUtterance()
discours.text = texteVersSpeech.value
discours.volume = 1
discours.rate = 1
discours.pitch = 1
window.speechSynthesis.speak(parole)
} Il instancie SpeechSynthesisUtterance() et définit le texte à prononcer à partir du texte saisi dans la zone de saisie. Ensuite, utilisez l’objet speech pour appeler SpeechSynthesis#speak afin de prononcer le texte dans la zone de saisie du locuteur.
La deuxième démo Demo - Speech to Text reconnaît la parole comme du texte. Cliquez sur le bouton Appuyez et parlez dans le micro et parlez dans le microphone, et ce que nous disons sera traduit dans le contenu de la zone de saisie de texte.
Cliquer sur le bouton Taper et parler dans le micro appellera la fonction tapToSpeak :
function tapToSpeak() {
var SpeechRecognition = SpeechRecognition;
reconnaissance const = new SpeechRecognition()
reconnaissance.onstart = function() { }
reconnaissance.onresult = fonction (événement) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = transcription
}
reconnaissance.onerror = fonction (ev) {
console.erreur(ev)
}
reconnaissance.start()
} Ici, SpeechRecognition est instanciée, puis les gestionnaires d'événements et les rappels sont enregistrés. onstart est appelé lorsque la reconnaissance vocale démarre onerror est appelé lorsqu'une erreur se produit. Chaque fois que la reconnaissance vocale capture une ligne, onresult est appelé.
Dans onresult , extrayez le contenu et placez-le dans textarea . Ainsi, lorsque nous parlons dans le microphone, le texte apparaît dans textarea .
Ressources associées :
L'API Bluetooth nous permet d'accéder à des appareils à faible consommation sur téléphones mobiles appareil amélioré Bluetooth et utilisez-le pour partager des données d'une page Web vers un autre appareil.
L'API de base est navigator.bluetooth.requestDevice . En appelant ceci, le navigateur invitera l'utilisateur à utiliser le sélecteur de périphérique, où l'utilisateur pourra sélectionner un périphérique ou annuler la demande. navigator.bluetooth.requestDevice nécessite un objet obligatoire. Cet objet définit un filtre qui renvoie les appareils Bluetooth correspondant au filtre.
Examinons un exemple simple utilisant l'API navigator.bluetooth.requestDevice pour récupérer les informations de base sur l'appareil à partir d'un appareil BLE :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Démo-Bluetooth
</div>
<div class="web-api-card-body">
<div id="erreur" class="fermer"></div>
<div>
<div>Nom de l'appareil : <span id="dname"></span></div>
<div>ID de l'appareil : <span id="did"></span></div>
<div>Appareil connecté : <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Obtenir un appareil BLE</button>
</div>
</div>
</div>
</div>
</corps>
<script>
fonction bluetoothAction(){
si (navigateur.bluetooth) {
navigator.bluetooth.requestDevice({
acceptAllDevices : vrai
}).then(appareil => {
dname.innerHTML = périphérique.nom
did.innerHTML = périphérique.id
dconnected.innerHTML = périphérique.connecté
}).catch(erreur => {
error.innerHTML = "Oh mon Dieu !! Quelque chose s'est mal passé."
erreur.classList.remove("fermer")
})
} autre {
error.innerHTML = "Bluetooth n'est pas pris en charge."
erreur.classList.remove("fermer")
}
}
</script> 
Les informations sur l'appareil seront affichées ici. Cliquer sur le bouton Get BLE Device appellera la fonction bluetoothAction :
function bluetoothAction(){
navigator.bluetooth.requestDevice({
acceptAllDevices : vrai
}).then(appareil => {
dname.innerHTML = périphérique.nom
did.innerHTML = périphérique.id
dconnected.innerHTML = périphérique.connecté
}).catch(erreur => {
console.error("Oh mon Dieu !! Quelque chose s'est mal passé.")
})
} La fonction bluetoothAction appelle navigator.bluetooth.requestDevice avec acceptAllDevices：true , ce qui l'amènera à analyser et à répertorier tous les appareils Bluetooth actifs à proximité. Il renvoie une promise , alors résolvez-la pour obtenir un paramètre de périphérique à partir de la fonction de rappel, ce paramètre de périphérique contiendra les informations du périphérique Bluetooth répertorié. C'est ici que nous utilisons ses propriétés pour afficher des informations sur l'appareil.
Ressources associées :
L'API de vibration peut faire vibrer notre appareil, comme un A manière dont nous devons répondre aux notifications ou aux retours physiques de nouvelles données ou informations.
La méthode pour effectuer une vibration est navigator.vibrate(pattern) . pattern est un nombre unique ou un tableau de nombres qui décrit un modèle de vibration.
L'appareil cessera de vibrer après 200 millisecondes :
navigator.vibrate(200) navigator.vibrate([200])
Cela fera vibrer l'appareil pendant 200 ms, faire une pause pendant 300 ms, et enfin vibrer pendant 400 ms et s'arrêter :
navigator.vibrate([200, 300, 400])
peut être passé à 0, [], [ 0,0,0] pour éliminer les vibrations.
Regardons un exemple simple :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Démo-Vibration
</div>
<div class="web-api-card-body">
<div id="erreur" class="fermer"></div>
<div>
<input id="vibTime" type="number" placeholder="Temps de vibration" />
</div>
<div>
<button onclick="vibrate()">Vibrer</button>
</div>
</div>
</div>
</div>
</corps>
<script>
si (navigateur.vibrer) {
fonction vibrer() {
temps const = vibTime.value
si(heure != "")
navigateur.vibrate (heure)
}
} autre {
error.innerHTML = "L'API Vibrate n'est pas prise en charge sur cet appareil."
erreur.classList.remove("fermer")
}
</script> Il y a une zone de saisie et un bouton ici. Entrez la durée de la vibration dans le champ de saisie et appuyez sur le bouton. Notre appareil vibrera pendant le temps saisi.
Ressources associées :
Broadcast Channel L'API Broadcast Channel permet une navigation différente à partir de la même origine Le contexte communique des messages ou des données. Parmi eux, le contexte de navigation fait référence aux fenêtres, onglets, iframes, Workers, etc.
BroadcastChannel est utilisée pour créer ou rejoindre un canal :
const PoliticsChannel = new BroadcastChannel("politics") politics est le nom du canal. Tout contexte qui initialise BroadcastChannel en utilisant politics rejoindra le canal politics . envoyés sur la chaîne et peuvent envoyer des messages à la chaîne.
S'il s'agit du premier constructeur BroadcastChannel avec politics , la chaîne sera créée. Vous pouvez utiliser BroadcastChannel.postMessage API pour publier des messages sur un canal. Utilisez l'API BroadcastChannel.onmessage pour vous abonner aux messages du canal.
Regardons une application de chat simple :
<body>
<en-tête>
<h2>API Web<h2>
</en-tête>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-BroadcastChannel
</div>
<div class="web-api-card-body">
<div class="page-info">Ouvrez cette page dans un autre <i>onglet</i>, <i>fenêtre</i> ou <i>iframe</i> pour discuter avec eux.</div>
<div id="erreur" class="fermer"></div>
<div id="displayMsg" style="font-size:19px;text-align:left;">
</div>
<div class="chatArea">
<input id="input" type="text" placeholder="Tapez votre message" />
<button onclick="sendMsg()">Envoyer un message au canal</button>
</div>
</div>
</div>
</div>
</corps>
<script>
const l = console.log;
essayer {
var politiqueChannel = new BroadcastChannel("politique")
politiqueChannel.onmessage = onMessage
var userId = Date.maintenant()
} attraper(e) {
error.innerHTML = "L'API BroadcastChannel n'est pas prise en charge sur cet appareil."
erreur.classList.remove("fermer")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
envoyerMsg()
}
})
fonction surMessage(e) {
const {msg,id}=e.data
const newHTML = "<div class='chat-msg'><span><i>"+id+"</i> : "+msg+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
displayMsg.scrollTop = displayMsg.scrollHeight
}
fonction envoyerMsg() {
PoliticsChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Moi</i> : "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
entrée.valeur = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Voici un simple texte et un bouton. Saisissez votre message et appuyez sur le bouton pour l'envoyer. Ce qui suit initialise politicalChannel et définit un écouteur d'événement onmessage sur politicalChannel afin qu'il puisse recevoir et afficher des messages.
Cliquer sur le bouton appellera la fonction sendMsg . Il envoie des messages au canal politics via BroadcastChannel#postMessage . Tout onglet, iframe ou travailleur qui initialise ce script recevra les messages envoyés à partir d'ici, donc cette page recevra les messages envoyés à partir d'autres contextes. Ressources associées :
Les opérations du Presse-papiers telles que copier, couper et coller sont des applications. Certaines des fonctionnalités les plus courantes de . L'API Clipboard permet aux utilisateurs Web d'accéder au presse-papiers du système et d'effectuer des opérations de base dans le presse-papiers.
Auparavant, il était possible d'utiliser document.execCommand pour interagir avec le presse-papiers du système. L'API du presse-papiers asynchrone moderne fournit un accès direct pour lire et écrire le contenu du presse-papiers.
Lire le contenu du presse-papiers :
navigator.clipboard.readText().then(clipText =>
document.getElementById("boîte d'envoi").innerText = clipText
); Écrire le contenu dans le presse-papiers :
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* le presse-papiers a été défini avec succès */
}, fonction() {
/* Échec de l'écriture dans le presse-papiers */
});
} Ressources associées :
L'API de partage peut nous aider à implémenter des fonctions de partage sur les applications Web. Cela donne une sensation de partage nativement mobile. Il permet de partager du texte, des fichiers et des liens vers d'autres applications sur votre appareil.
L'API Web Share est accessible via navigator.share :
if (navigator.share) {
navigateur.share({
titre : 'Baidu',
texte : 'Baidu',
URL : '<https://www.baidu.com/>',
})
.then(() => console.log('Partage réussi'))
.catch((erreur) => console.log('Échec du partage', erreur));
} Le code ci-dessus implémente le partage de texte à l'aide de JavaScript natif. Notez que nous ne pouvons appeler cette opération qu'en utilisant l'événement onclick :
function Share({ label, text, title }) {
const shareDetails = { titre, texte } ;
const handleSharing = async() => {
si (navigator.share) {
essayer {
wait navigator.share(shareDetails).then(() => console.log("Envoyé"));
} attraper (erreur) {
console.log(`Oups ! Je n'ai pas pu partager avec le monde entier car : ${error}`);
}
} autre {
// code de secours
console.log(
"Le partage Web n'est actuellement pas pris en charge sur ce navigateur. Veuillez fournir un rappel"
);
}
} ;
retour (
<bouton onClick={handleSharing}>
<span>{label}</span>
</bouton>
);
} Ressources associées :