In der Web-API gibt es sehr nützliche Objekte, Eigenschaften und Funktionen, die zum Ausführen kleiner Aufgaben wie dem Zugriff auf das DOM bis hin zu komplexen Aufgaben wie der Verarbeitung von Audio und Video verwendet werden können. Zu den gängigen APIs gehören Canvas, Web Worker, History, Fetch usw. Werfen wir einen Blick auf einige ungewöhnliche, aber nützliche Web-APIs!
Volltextübersicht:
Web Audio API
Vollbild-API
Web Speech API
Web Bluetooth API
Vibration API
Broadcast Channel API
Clipboard API
Web Share API
Audio API können wir Audiostreams im Web betreiben und Audio hinzufügen Quellen im Web Effekte und Filter. Die Audioquelle kann aus <audio> , einer Video-/Audio-Quelldatei oder einem Audio-Netzwerk-Stream stammen.
Schauen wir uns ein Beispiel an:
<body>
<Kopfzeile>
<h2>Web-APIs<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Audio
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<audio steuert src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Init</button>
<button onclick="audioFromAudioFile.play()">Abspielen</button>
<button onclick="audioFromAudioFile.pause()">Pause</button>
<button onclick="audioFromAudioFile.stop()">Stop</button>
</div>
<div>
<span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></ span>
<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>
<Skript>
const l = console.log
let audioFromAudioFile = (function() {
var audioContext
varvolNode
varpannerNode
var mediaSource
Funktion init() {
l("Init")
versuchen {
audioContext = neuer AudioContext()
mediaSource = audioContext.createMediaElementSource(audio)
volNode = audioContext.createGain()
volNode.gain.value = 1
pannerNode = new StereoPannerNode(audioContext, { pan:0 })
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
fangen(e) {
error.innerHTML = „Dieses Gerät unterstützt die Web-Audio-API nicht“
error.classList.remove("close")
}
}
Funktion play() {
audio.play()
}
Funktion pause() {
audio.pause()
}
Funktion stop() {
audio.stop()
}
Funktion changeVolume() {
volNode.gain.value = this.value
l("Vol Range:",this.value)
}
Funktion changePan() {
pannerNode.gain.value = this.value
l("Pan Range:",this.value)
}
zurückkehren {
init,
spielen,
Pause,
stoppen,
changePan,
Volumen ändern
}
})()
</script> In diesem Beispiel wird Audio vom <audio> -Element an AudioContext übertragen. Soundeffekte (z. B. Schwenken) werden der Audioquelle hinzugefügt, bevor sie an den Audioausgang (Lautsprecher) ausgegeben werden.
ButtonInit ruft beim Klicken die init -Funktion auf. Dadurch wird eine AudioContext Instanz erstellt und als audioContext festgelegt. Als nächstes erstellt es eine Medienquelle createMediaElementSource(audio) und übergibt das Audioelement als Audioquelle. Der Volume-Knoten volNode wird von createGain erstellt und kann zum Anpassen der Lautstärke verwendet werden. Als nächstes verwenden Sie StereoPannerNode , um den Schwenkeffekt einzurichten, und verbinden schließlich den Knoten mit der Medienquelle.
Klicken Sie auf die Schaltflächen (Wiedergabe, Pause, Stopp), um den Ton abzuspielen, anzuhalten und zu stoppen. Die Seite verfügt über einen Schieberegler für Lautstärke und Schwenkbereich. Sie können die Lautstärke und den Schwenkeffekt anpassen, indem Sie den Schieberegler verschieben.
Verwandte Ressourcen:
Die Vollbild-API wird verwendet, um den Vollbildmodus im Web zu aktivieren Anwendungen, mit denen Sie die Seite/das Element im Vollbildmodus anzeigen können. Auf Android-Telefonen läuft es über das Browserfenster und die Statusleiste oben in Android (wo Netzwerkstatus, Akkustatus usw. angezeigt werden).
Vollbild-API-Methode:
requestFullscreen : Zeigt das ausgewählte Element im Vollbildmodus auf dem System an und schließt andere Anwendungen sowie Browser- und System-UI-Elemente.exitFullscreen : Vollbildmodus verlassen und in den Normalmodus wechseln.Schauen wir uns ein gängiges Beispiel für die Verwendung des Vollbildmodus zum Ansehen eines Videos an:
<body>
<Kopfzeile>
<h2>Web-APIs<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Vollbild
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
Diese API ermöglicht den Vollbildmodus unserer Webseite. Sie ermöglicht es Ihnen, das Element auszuwählen, das Sie im Vollbildmodus anzeigen möchten. Anschließend werden die Fensterfunktionen des Browsers wie die URL-Leiste und das Fensterfenster geschlossen und das Element angezeigt, um es vollständig anzuzeigen Breite und Höhe des Systems.
Bei Android-Telefonen werden das Browserfenster und die Android-Benutzeroberfläche entfernt, in denen der Netzwerkstatus und der Batteriestatus angezeigt werden, und das Element wird in voller Breite des Android-Systems angezeigt.
</div>
<div class="video-stage">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Vollbild umschalten</button>
</div>
<div>
Diese API ermöglicht den Vollbildmodus unserer Webseite. Sie ermöglicht es Ihnen, das Element auszuwählen, das Sie im Vollbildmodus anzeigen möchten. Anschließend werden die Fensterfunktionen des Browsers wie die URL-Leiste und das Fensterfenster geschlossen und das Element angezeigt, um es vollständig anzuzeigen Breite und Höhe des Systems.
Bei Android-Telefonen werden das Browserfenster und die Android-Benutzeroberfläche entfernt, in denen der Netzwerkstatus und der Batteriestatus angezeigt werden, und das Element wird in voller Breite des Android-Systems angezeigt.
</div>
</div>
</div>
</div>
</body>
<Skript>
const l =console.log
Funktion toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
anders {
document.exitFullscreen()
}
} anders {
error.innerHTML = „Dieses Gerät unterstützt die Vollbild-API nicht“
error.classList.remove("close")
}
}
</script> Wie Sie sehen können, befindet sich das Videoelement im div#video-stage-Element mit einer Schaltfläche „Vollbild umschalten“.
Wir möchten, dass das Element div#video-stage im Vollbildmodus angezeigt wird, wenn auf die Schaltfläche geklickt wird, um den Vollbildmodus umzuschalten. Die Implementierung der toggle -Funktion ist wie folgt:
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestFullscreen()
anders
document.exitFullscreen()
} Hier wird querySelector verwendet, um div#video-stage Element zu finden und seine HTMLDivElement-Instanz auf videoStageEl zu speichern.
Verwenden Sie dann die Eigenschaft document.fullsreenElement , um zu bestimmen, ob document im Vollbildmodus vorliegt, sodass requestFullscreen() auf videoStageEl aufgerufen werden kann. Dadurch nimmt div#video-stage die gesamte Geräteansicht ein.
Wenn Sie im Vollbildmodus auf die Schaltfläche „Vollbild umschalten“ klicken, wird exitFullcreen für document aufgerufen, sodass die UI-Ansicht zur normalen Ansicht zurückkehrt (Vollbild beenden).
Verwandte Ressourcen:
Die Web Speech API bietet Sprachsynthese und Spracherkennung. Funktionalität hinzugefügt bis hin zu Webanwendungen. Mit dieser API können wir Sprachbefehle an Webanwendungen erteilen, genau wie bei Android über Google Speech oder mit Cortana unter Windows.
Schauen wir uns ein einfaches Beispiel an, bei dem die Web Speech API zum Implementieren von Text-to-Speech und Speech-to-Text verwendet wird:
<body>
<Kopfzeile>
<h2>Web-APIs<h2>
</header>
<div class="web-api-cnt">
<div id="error" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo – Text-to-Speech
</div>
<div class="web-api-card-body">
<div>
<input placeholder="Text hier eingeben" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Zum Sprechen tippen</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo – Sprache in Text umwandeln
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="Text wird hier angezeigt, wenn Sie mit dem Sprechen beginnen." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Tippen und ins Mikrofon sprechen</button>
</div>
</div>
</div>
</div>
</body>
<Skript>
versuchen {
var Speech = new SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var Recognition = new SpeechRecognition()
} fangen(e) {
error.innerHTML = „Dieses Gerät unterstützt die Web Speech API nicht“
error.classList.remove("close")
}
Funktion speak() {
Speech.text = textToSpeech.value
Speech.Volume = 1
Speech.rate=1
Speech.pitch=1
window.speechSynthesis.speak(speech)
}
Funktion tapToSpeak() {
Erkennung.onstart = function() { }
Erkennung.onresult = Funktion(Ereignis) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = Transkript
}
Erkennung.onerror = function(ev) {
console.error(ev)
}
Erkennung.start()
}
</script> 
Die erste Demo – Text to Speech – demonstriert die Verwendung dieser API mit einem einfachen Eingabefeld, das Eingabetext empfängt, und einer Schaltfläche zum Ausführen von Sprachoperationen.
Funktion speak() {
const Speech = new SpeechSynthesisUtterance()
Speech.text = textToSpeech.value
Speech.Volume = 1
Speech.rate = 1
Speech.pitch = 1
window.speechSynthesis.speak(speech)
} Es instanziiert SpeechSynthesisUtterance() Objekt und legt den zu sprechenden Text anhand des im Eingabefeld eingegebenen Textes fest. Verwenden Sie dann das speech , um SpeechSynthesis#speak aufzurufen, um den Text im Eingabefeld im Lautsprecher vorzulesen.
Die zweite Demo Demo – Speech to Text erkennt Sprache als Text. Klicken Sie auf die Schaltfläche „Tippen und ins Mikrofon sprechen“ und sprechen Sie in das Mikrofon. Das, was wir sagen, wird dann in den Inhalt des Texteingabefelds übersetzt.
Durch Klicken auf die Schaltfläche „Tippen und ins Mikrofon sprechen“ wird die tapToSpeak-Funktion aufgerufen:
function tapToSpeak() {
var SpeechRecognition = SpeechRecognition;
const Recognition = new SpeechRecognition()
Erkennung.onstart = function() { }
Erkennung.onresult = Funktion(Ereignis) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
SpeechToText.value = Transkript
}
Erkennung.onerror = function(ev) {
console.error(ev)
}
Erkennung.start()
} Hier wird SpeechRecognition instanziiert und dann werden Ereignishandler und Rückrufe registriert. onstart wird aufgerufen, wenn die Spracherkennung startet, onerror wird aufgerufen, wenn ein Fehler auftritt. Immer wenn die Spracherkennung eine Zeile erfasst, wird onresult aufgerufen.
Extrahieren Sie im onresult Callback den Inhalt und legen Sie ihn im textarea fest. Wenn wir also in das Mikrofon sprechen, erscheint der Text im textarea .
Verwandte Ressourcen:
Die Bluetooth-API ermöglicht uns den Zugriff auf Geräte mit geringem Stromverbrauch Mobiltelefone können ein Bluetooth-fähiges Gerät nutzen und es verwenden, um Daten von einer Webseite an ein anderes Gerät weiterzugeben.
Die grundlegende API ist navigator.bluetooth.requestDevice . Wenn Sie dies aufrufen, fordert der Browser den Benutzer zur Geräteauswahl auf, wo der Benutzer ein Gerät auswählen oder die Anfrage abbrechen kann. navigator.bluetooth.requestDevice erfordert ein obligatorisches Objekt. Dieses Objekt definiert einen Filter, der Bluetooth-Geräte zurückgibt, die dem Filter entsprechen.
Schauen wir uns ein einfaches Beispiel an, bei dem die navigator.bluetooth.requestDevice -API verwendet wird, um grundlegende Geräteinformationen von einem BLE-Gerät abzurufen:
<body>
<Kopfzeile>
<h2>Web-APIs<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>Gerätename: <span id="dname"></span></div>
<div>Geräte-ID: <span id="did"></span></div>
<div>Gerät verbunden: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">BLE-Gerät abrufen</button>
</div>
</div>
</div>
</div>
</body>
<Skript>
Funktion BluetoothAction(){
if(navigator.bluetooth) {
navigator.bluetooth.requestDevice({
AcceptAllDevices: wahr
}).then(device => {
dname.innerHTML = Gerätename
did.innerHTML = device.id
dconnected.innerHTML = Gerät.verbunden
}).catch(err => {
error.innerHTML = „Oh mein Gott!! Etwas ist schiefgelaufen.“
error.classList.remove("close")
})
} anders {
error.innerHTML = „Bluetooth wird nicht unterstützt.“
error.classList.remove("close")
}
}
</script> 
Hier werden Geräteinformationen angezeigt. Durch Klicken auf die Schaltfläche „BLE-Gerät abrufen“ wird die bluetoothAction -Funktion aufgerufen:
function bluetoothAction(){
navigator.bluetooth.requestDevice({
AcceptAllDevices: wahr
}).then(device => {
dname.innerHTML = Gerätename
did.innerHTML = device.id
dconnected.innerHTML = Gerät.verbunden
}).catch(err => {
console.error("Oh mein Gott!! Etwas ist schiefgelaufen.")
})
} Die Funktion bluetoothAction ruft navigator.bluetooth.requestDevice mit acceptAllDevices：true auf, wodurch alle aktiven Bluetooth-Geräte in der Nähe gescannt und aufgelistet werden. Es gibt ein promise zurück. Lösen Sie es also auf, um einen Geräteparameter aus der Rückruffunktion zu erhalten. Dieser Geräteparameter enthält die Informationen des aufgelisteten Bluetooth-Geräts. Hier nutzen wir seine Eigenschaften, um Informationen auf dem Gerät anzuzeigen.
Verwandte Ressourcen:
Die Vibrations-API kann unser Gerät zum Vibrieren bringen, als A Art und Weise, wie wir auf Benachrichtigungen oder physisches Feedback zu neuen Daten oder Informationen reagieren sollten.
Die Methode zur Durchführung einer Vibration ist navigator.vibrate(pattern) . pattern ist eine einzelne Zahl oder eine Reihe von Zahlen, die ein Schwingungsmuster beschreiben.
Dadurch hört das Gerät nach 200 Millisekunden auf zu vibrieren:
navigator.vibrate(200) navigator.vibrate([200])
Dadurch vibriert das Gerät 200 ms lang, pausiert 300 ms und schließlich vibriert es 400 ms lang und stoppt:
navigator.vibrate([200, 300, 400])
kann 0 übergeben werden, [], [ 0,0,0], um Vibrationen zu eliminieren.
Schauen wir uns ein einfaches Beispiel an:
<body>
<Kopfzeile>
<h2>Web-APIs<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Vibration
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<input id="vibTime" type="number" placeholder="Vibration time" />
</div>
<div>
<button onclick="vibrate()">Vibrieren</button>
</div>
</div>
</div>
</div>
</body>
<Skript>
if(navigator.vibrate) {
Funktion vibrate() {
const time = vibTime.value
if(time != "")
navigator.vibrate(time)
}
} anders {
error.innerHTML = „Vibrate-API wird auf diesem Gerät nicht unterstützt.“
error.classList.remove("close")
}
</script> Hier gibt es ein Eingabefeld und einen Button. Geben Sie die Dauer der Vibration in das Eingabefeld ein und drücken Sie die Taste. Unser Gerät vibriert für die eingegebene Zeit.
Zugehörige Ressourcen:
Die Broadcast-Channel-API ermöglicht unterschiedliche Browsings vom selben Ursprung Kontext kommuniziert Nachrichten oder Daten. Unter diesen bezieht sich der Browsing-Kontext auf Fenster, Registerkarten, Iframes, Worker usw.
BroadcastChannel Klasse wird verwendet, um einen Kanal zu erstellen oder ihm beizutreten:
const PoliticsChannel = New BroadcastChannel("Politics") politics ist der Name des Kanals. Jeder Kontext, der BroadcastChannel Konstruktor mit politics initialisiert, tritt dem politics -Kanal bei. Er empfängt alle Nachrichten auf dem Kanal gesendete Nachrichten und kann Nachrichten an den Kanal senden.
Wenn es sich um den ersten BroadcastChannel Konstruktor mit politics handelt, wird der Kanal erstellt. Sie können BroadcastChannel.postMessage API verwenden, um Nachrichten in einem Kanal zu veröffentlichen. Verwenden Sie die BroadcastChannel.onmessage API, um Kanalnachrichten zu abonnieren.
Schauen wir uns eine einfache Chat-Anwendung an:
<body>
<Kopfzeile>
<h2>Web-APIs<h2>
</header>
<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">Öffnen Sie diese Seite in einem anderen <i>Tab</i>, <i>Fenster</i> oder <i>Iframe</i>, um mit ihnen zu chatten.</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="Geben Sie Ihre Nachricht ein" />
<button onclick="sendMsg()">Nachricht an Kanal senden</button>
</div>
</div>
</div>
</div>
</body>
<Skript>
const l = console.log;
versuchen {
var PoliticsChannel = new BroadcastChannel("Politik")
PoliticsChannel.onmessage = onMessage
var userId = Date.now()
} fangen(e) {
error.innerHTML = „BroadcastChannel API wird auf diesem Gerät nicht unterstützt.“
error.classList.remove("close")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
sendMsg()
}
})
Funktion onMessage(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
}
Funktion sendMsg() {
PoliticsChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Me</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
input.value = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Hier ist ein einfacher Text und eine Schaltfläche. Geben Sie Ihre Nachricht ein und drücken Sie die Taste, um sie zu senden. Im Folgenden wird politicalChannel initialisiert und ein onmessage Ereignis-Listener auf politicalChannel festgelegt, damit dieser Nachrichten empfangen und anzeigen kann.
Durch Klicken auf die Schaltfläche wird die sendMsg -Funktion aufgerufen. Es sendet Nachrichten über BroadcastChannel#postMessage API an den politics . Jeder Tab, Iframe oder Worker, der dieses Skript initialisiert, empfängt von hier gesendete Nachrichten, sodass diese Seite Nachrichten von anderen Kontexten empfängt. Verwandte Ressourcen:
Zwischenablageoperationen wie Kopieren, Ausschneiden und Einfügen sind einige Anwendungen der häufigsten Merkmale in . Mit der Clipboard-API können Webbenutzer auf die Systemzwischenablage zugreifen und grundlegende Zwischenablagevorgänge ausführen.
Zuvor war es möglich, document.execCommand zu verwenden, um mit der Systemzwischenablage zu interagieren. Die moderne asynchrone Zwischenablage-API bietet direkten Zugriff zum Lesen und Schreiben des Inhalts der Zwischenablage.
Inhalt aus der Zwischenablage lesen:
navigator.clipboard.readText().then(clipText =>
document.getElementById("outbox").innerText = clipText
); Inhalt in die Zwischenablage schreiben:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* Zwischenablage erfolgreich eingerichtet */
}, function() {
/* Schreiben in die Zwischenablage fehlgeschlagen */
});
} Verwandte Ressourcen:
Share API kann uns bei der Implementierung von Sharing-Funktionen in Webanwendungen helfen. Es vermittelt ein mobil-natives Sharing-Gefühl. Es ermöglicht das Teilen von Texten, Dateien und Links mit anderen Anwendungen auf Ihrem Gerät.
Auf die Web Share-API kann über navigator.share zugegriffen werden:
if (navigator.share) {
navigator.share({
Titel: 'Baidu',
Text: 'Baidu',
URL: '<https://www.baidu.com/>',
})
.then(() => console.log('Teilen erfolgreich'))
.catch((error) => console.log('Sharing failed', error));
} Der obige Code implementiert die Textfreigabe mithilfe von nativem JavaScript. Beachten Sie, dass wir diesen Vorgang nur mit dem onclick -Ereignis aufrufen können:
function Share({ label, text, title }) {
const shareDetails = { title, text };
const handleSharing = async () => {
if (navigator.share) {
versuchen {
wait navigator.share(shareDetails).then(() => console.log("Sent"));
} Catch (Fehler) {
console.log(`Ups! Ich konnte es nicht mit der Welt teilen, weil: ${error}`);
}
} anders {
// Fallback-Code
console.log(
„Web Share wird in diesem Browser derzeit nicht unterstützt. Bitte geben Sie einen Rückruf an.“
);
}
};
zurückkehren (
<button onClick={handleSharing}>
<span>{label}</span>
</button>
);
} Verwandte Ressourcen: