In Web API, there are very useful objects, properties, and functions that can be used to perform tasks as small as accessing the DOM to complex tasks such as processing audio and video.
Common APIs are Canvas, Web Worker, History, Fetch, etc. Let’s take a look at some uncommon but very useful Web APIs!
- Web Audio API
- Fullscreen API
- Web Speech API
- Web Bluetooth API
- Vibration API
- Broadcast Channel API
- Clipboard API
- Web Share API
1. Web Audio API
The Audio API allows us to manipulate audio streams on the web, and it can be used to add effects and filters to audio sources on the web. Audio sources can come from <audio>, video/audio source files, or audio network streams.
Here’s an example:
<body>
<header>
<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 controls src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Init</button>
<button onclick="audioFromAudioFile.play()">Play</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>
<script>
const l = console.log
let audioFromAudioFile = (function() {
var audioContext
var volNode
var pannerNode
var mediaSource
function init() {
l("Init")
try {
audioContext = new 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)
}
catch(e) {
error.innerHTML = "This device doesn't support Web Audio API"
error.classList.remove("close")
}
}
function play() {
audio.play()
}
function pause() {
audio.pause()
}
function stop() {
audio.stop()
}
function changeVolume() {
volNode.gain.value = this.value
l("Vol Range:",this.value)
}
function changePan() {
pannerNode.gain.value = this.value
l("Pan Range:",this.value)
}
return {
init,
play,
pause,
stop,
changePan,
changeVolume
}
})()
</script>This example transmits audio from the <audio> element to AudioContext, and sound effects (such as panning) are added to the audio source before being output to the audio output (speakers).
The button Init calls the init function . This will create an AudioContextinstance and set it to audioContext. Next, it creates a media source createMediaElementSource(audio), passing the audio element as the audio source.
The volume node volNode is created by createGain and can be used to adjust the volume. Next is to set up the panning effect use StereoPannerNode, and finally connect the node to the media source.
Click the buttons (Play, Pause, Stop) to play, pause and stop the audio. The page has a volume and pan range slider, sliding the slider to adjust the audio volume and pan effect.
Related resources:
- Demo：web-api-examples.github.io/audio.html
- MDN documentation: developer.mozilla.org/en-US/docs/…
2. Fullscreen API
The Fullscreen API is used to enable fullscreen mode in a web application, using it to view pages/elements in fullscreen mode. On Android phones, it overflows the browser window and the status bar at the top of Android (where it shows network status, battery status, etc.).
Fullscreen API methods:
requestFullscreen: Displays the selected element in full screen mode on the system, closing other applications as well as the browser and system UI elements.
exitFullscreen: Exit full screen mode and switch to normal mode.
Here’s a common example of watching a video in full screen mode:
<body>
<header>
<h2>Web APIs<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Fullscreen
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.
In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.
</div>
<div class="video-stage">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Fullscreen</button>
</div>
<div>
This API makes fullscreen-mode of our webpage possible. It lets you select the Element you want to view in fullscreen-mode, then it shuts off the browsers window features like URL bar, the window pane, and presents the Element to take the entire width and height of the system.
In Android phones, it will remove the browsers window and the Android UI where the network status, battery status are displayed, and display the Element in full width of the Android system.
</div>
</div>
</div>
</div>
</body>
<script>
const l =console.log
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
else {
document.exitFullscreen()
}
} else {
error.innerHTML = "This device doesn't support Fullscreen API"
error.classList.remove("close")
}
}
</script>As you can see, the video element is inside the div#video-stage element, with a button Toggle Fullscreen.
When switch to fullscreen, we want the elementdiv#video-stagefull. toggle to be full screen, The implementation of the function is as follows:
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestFullscreen()
else
document.exitFullscreen()
}This works by use querySelector to find the elementdiv#video-stage and saving its HTMLDivElement instance in videoStageElon
Then, use the document.fullsreenElement property to determine if the document is fullscreen, so it can call requestFullscreen() from videoStageElbe. This will make the view div#video-stage occupy the entire screen.
If the Toggle Fullscreen button is clicked while in fullscreen mode, then will call exitFullcreen to returns to normal view (exits fullscreen).
Related resources:
3. Web Speech API
The Web Speech API provides functionality for adding speech synthesis and speech recognition to web applications. Using this API, we will be able to issue voice commands to the web application, just like on Android through its Google Speech or using Cortana on Windows.
Let’s look at a simple example using the Web Speech API to implement text-to-speech and speech-to-text:
<body>
<header>
<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="Enter text here" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Tap to Speak</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Speech to Text
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="Text will appear here when you start speeaking." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Tap and Speak into Mic</button>
</div>
</div>
</div>
</div>
</body>
<script>
try {
var speech = new SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var recognition = new SpeechRecognition()
} catch(e) {
error.innerHTML = "This device doesn't support Web Speech API"
error.classList.remove("close")
}
function speak() {
speech.text = textToSpeech.value
speech.volume = 1
speech.rate=1
speech.pitch=1
window.speechSynthesis.speak(speech)
}
function tapToSpeak() {
recognition.onstart = function() { }
recognition.onresult = function(event) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
speechToText.value = transcript
}
recognition.onerror = function(ev) {
console.error(ev)
}
recognition.start()
}
</script>
The first demo, Demo – Text to Speech, demonstrates the use of this API with a simple input field that accepts input text and a button to perform speech actions.
function speak() {
const speech = new SpeechSynthesisUtterance()
speech.text = textToSpeech.value
speech.volume = 1
speech.rate = 1
speech.pitch = 1
window.speechSynthesis.speak(speech)
}It instantiates the SpeechSynthesisUtterance()object and sets the text to be spoken from the text entered in the input box. Then speech, call SpeechSynthesis#speakthe function with the object to speak the text in the input box into the speaker.
The second demo Demo – Speech to Text recognizes speech as text. Click the Tap and Speak into Mic button and speak into the microphone, and what we say will be translated into the text input box.
Clicking the Tap and Speak into Mic button calls the tapToSpeak function:
function tapToSpeak() {
var SpeechRecognition = SpeechRecognition;
const recognition = new SpeechRecognition()
recognition.onstart = function() { }
recognition.onresult = function(event) {
const curr = event.resultIndex
const transcript = event.results[curr][0].transcript
speechToText.value = transcript
}
recognition.onerror = function(ev) {
console.error(ev)
}
recognition.start()
}This is instantiated SpeechRecognition, and event handlers and callbacks are registered. Called when speech recognition starts, onstartand when an error occurs onerror. Called whenever speech recognition captures a line onresult.
In the onresultcallback , extract the contents and set them into textarea. So when we speak into the microphone, the text appears in the textareacontent .
Related resources:
4. Web Bluetooth API
The Bluetooth API allows us to access a Bluetooth Low Energy device on our phone and use it to share data from a web page to another device.
The base API is navigator.bluetooth.requestDevice. Calling it will cause the browser to prompt the user for a device selector, where the user can select a device or cancel the request. navigator.bluetooth.requestDevice requires a coercion object. This object defines a filter for returning bluetooth devices that match the filter.
Let’s look at a simple example using the navigator.bluetooth.requestDevice API to retrieve basic device information from a BLE device:
<body>
<header>
<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>Device Name: <span id="dname"></span></div>
<div>Device ID: <span id="did"></span></div>
<div>Device Connected: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Get BLE Device</button>
</div>
</div>
</div>
</div>
</body>
<script>
function bluetoothAction(){
if(navigator.bluetooth) {
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
dname.innerHTML = device.name
did.innerHTML = device.id
dconnected.innerHTML = device.connected
}).catch(err => {
error.innerHTML = "Oh my!! Something went wrong."
error.classList.remove("close")
})
} else {
error.innerHTML = "Bluetooth is not supported."
error.classList.remove("close")
}
}
</script>
Device information is displayed here. Clicking the Get BLE Device button calls the bluetoothAction function :
function bluetoothAction(){
navigator.bluetooth.requestDevice({
acceptAllDevices: true
}).then(device => {
dname.innerHTML = device.name
did.innerHTML = device.id
dconnected.innerHTML = device.connected
}).catch(err => {
console.error("Oh my!! Something went wrong.")
})
}The function bluetoothAction calls the navigator.bluetooth.requestDevice API with the option acceptAllDevices：true , which will cause it to scan and list all nearby Bluetooth active devices. It returns one promise, so resolve it to get a parameter device from the callback function, this device parameter will hold the information of the listed bluetooth devices. This is where we use its properties to display information on the device.
Related resources:
5. Vibration API
The Vibration API can make our device vibrate as a way of notification or physical feedback of new data or information we should respond to.
The way to perform vibration is navigator.vibrate(pattern). patternis a single number or an array of numbers describing the vibration mode.
This will stop the device from vibrating after 200ms:
navigator.vibrate(200)
navigator.vibrate([200])This will make the device vibrate for 200ms, pause for 300ms, vibrate for 400ms and stop:
navigator.vibrate([200, 300, 400])Vibration can be eliminated by passing 0, [], [0,0,0].
Here’s a simple example:
<body>
<header>
<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()">Vibrate</button>
</div>
</div>
</div>
</div>
</body>
<script>
if(navigator.vibrate) {
function vibrate() {
const time = vibTime.value
if(time != "")
navigator.vibrate(time)
}
} else {
error.innerHTML = "Vibrate API not supported in this device."
error.classList.remove("close")
}
</script>There is an input box and a button here. Enter the duration of the vibration in the input box and press the button. Our device will vibrate for the time entered.
Related resources:
6. Broadcast Channel API
The Broadcast Channel API allows the communication of messages or data from different browsing contexts of the same origin . Among them, the browsing context refers to windows, tabs, iframes, workers, etc.
BroadcastChannel Class for creating or joining a channel:
const politicsChannel = new BroadcastChannel("politics")politics is the name of the channel, any context that uses the politics initialize BroadcastChannel constructor will join the politics channel , it will receive any messages sent on the channel, and can send messages into the channel.
If it’s the first BroadcastChannel constructor to have politics, the channel will be created. You can use BroadcastChannel.postMessage API to post a message to a channel. Use the BroadcastChannel.onmessage API to subscribe to channel messages.
Let’s take a look at a simple chat application:
<body>
<header>
<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">Open this page in another <i>tab</i>, <i>window</i> or <i>iframe</i> to chat with them.</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="Type your message" />
<button onclick="sendMsg()">Send Msg to Channel</button>
</div>
</div>
</div>
</div>
</body>
<script>
const l = console.log;
try {
var politicsChannel = new BroadcastChannel("politics")
politicsChannel.onmessage = onMessage
var userId = Date.now()
} catch(e) {
error.innerHTML = "BroadcastChannel API not supported in this device."
error.classList.remove("close")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
sendMsg()
}
})
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 + newHTML
displayMsg.scrollTop = displayMsg.scrollHeight
}
function 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>Here is a simple text and button. Enter the message and press the button to send the message. The politicalChannel is initialized , politicalChannel and an onmessage event monitor is set up, so that it can receive and display messages.
Clicking the button will call the sendMsg function. It sends messages to the politicschannel by BroadcastChannel#postMessage. Any tab, iframe or worker that initializes this script will receive messages sent from here, so this page will receive messages sent from other contexts.
Related resources:
7. Clipboard API
Clipboard operations such as copy, cut, and paste are some of the most common functions in applications. The Clipboard API enables web users to access the system clipboard and perform basic clipboard operations.
Previously, it was possible to interact document.execCommandwith the system clipboard using . The modern asynchronous clipboard API provides access to directly read and write the contents of the clipboard.
Read content from clipboard:
navigator.clipboard.readText().then(clipText =>
document.getElementById("outbox").innerText = clipText
);Write the content to the clipboard:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});
}Related resources:
8. Web Share API
Share API helps us implement sharing functionality on web applications. It gives a mobile-native sharing feel. It makes it possible to share text, files and links to other applications on the device.
The Web Share API is accessible via the navigator.share method :
if (navigator.share) {
navigator.share({
title: 'Google',
text: 'Google it',
url: '<https://www.google.com/>',
})
.then(() => console.log('Done'))
.catch((error) => console.log('Failed', error));
}The above code implements text sharing using native JavaScript. Note that we can only call this action using the onclick event :
function Share({ label, text, title }) {
const shareDetails = { title, text };
const handleSharing = async () => {
if (navigator.share) {
try {
await navigator.share(shareDetails).then(() => console.log("Sent"));
} catch (error) {
console.log(`Oops! I couldn't share to the world because: ${error}`);
}
} else {
// fallback code
console.log(
"Web share is currently not supported on this browser. Please provide a callback"
);
}
};
return (
<button onClick={handleSharing}>
<span>{label}</span>
</button>
);
}