В веб-API есть очень полезные объекты, свойства и функции, которые можно использовать для выполнения небольших задач, таких как доступ к DOM, и сложных задач, таких как обработка аудио и видео. Общие API включают Canvas, Web Worker, History, Fetch и т. д. Давайте взглянем на некоторые необычные, но полезные веб-API!
Полный обзор текста:
API веб-аудио
Полноэкранный API
API веб-речи API
веб-интерфейса Bluetooth API
вибрации API
широковещательного канала API
буфера
обмена API веб-ресурса
аудио позволяет нам управлять аудиопотоками в Интернете и может использоваться для добавления аудио источники веб-эффектов и фильтров. Источником звука может быть <audio> , исходный файл видео/аудио или сетевой аудиопоток.
Давайте посмотрим на пример:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Демо-Аудио
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<дел>
<управление звуком src="./audio.mp3" id="audio"></audio>
</div>
<дел>
<button onclick="audioFromAudioFile.init()">Инициализировать</button>
<button onclick="audioFromAudioFile.play()">Воспроизвести</button>
<button onclick="audioFromAudioFile.pause()">Пауза</button>
<button onclick="audioFromAudioFile.stop()">Стоп</button>
</div>
<дел>
<span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" Step="0.01" value="1" /></ пролет>
<span>Панорамирование: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" Step="0.01" value="0" />< /пролет>
</div>
</div>
</div>
</div>
</тело>
<скрипт>
const l = console.log
пусть audioFromAudioFile = (function() {
вар audioContext
варволноде
варпаннерноде
вар mediaSource
функция инициализации() {
л("Инициал")
пытаться {
audioContext = новый AudioContext()
mediaSource = audioContext.createMediaElementSource(аудио)
volNode = audioContext.createGain()
volNode.gain.value = 1
pannerNode = новый StereoPannerNode (audioContext, { pan: 0})
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
поймать(е) {
error.innerHTML = «Это устройство не поддерживает API веб-аудио»
error.classList.remove("закрыть")
}
}
функция воспроизведения() {
аудио.играть()
}
функция пауза() {
аудио.пауза()
}
функция стоп() {
аудио.стоп()
}
функция измененияОбъема() {
volNode.gain.value = this.value
l("Диапазон объёмов:",this.value)
}
функция измененияПан() {
pannerNode.gain.value = this.value
l("Диапазон панорамирования:",this.value)
}
возвращаться {
инициализация,
играть,
пауза,
останавливаться,
изменитьПан,
изменитьОбъем
}
})()
</script> В этом примере звук передается из элемента <audio> в AudioContext . Звуковые эффекты (например, панорамирование) добавляются к источнику звука перед выводом на аудиовыход (динамик).
ButtonInit вызывает функцию init при нажатии. Это создаст экземпляр AudioContext и установит его как audioContext . Затем он создает источник мультимедиа createMediaElementSource(audio) , передавая элемент audio в качестве источника звука. Узел громкости volNode создается с помощью createGain и может использоваться для регулировки громкости. Затем используйте StereoPannerNode для настройки эффекта панорамирования и, наконец, подключите узел к источнику мультимедиа.
Нажимайте кнопки (Воспроизведение, Пауза, Стоп), чтобы воспроизвести, приостановить и остановить звук. На странице есть ползунок громкости и диапазона панорамирования, и вы можете регулировать громкость звука и эффект панорамирования, перемещая ползунок.
Связанные ресурсы:
Полноэкранный API используется для включения полноэкранного режима в Интернете. apps , что позволяет просматривать страницу/элемент в полноэкранном режиме. На телефонах Android он выходит за пределы окна браузера и строки состояния в верхней части Android (где отображается состояние сети, состояние батареи и т. д.).
Метод полноэкранного API:
requestFullscreen : отображает выбранный элемент в полноэкранном режиме в системе, закрывая другие приложения, а также элементы пользовательского интерфейса браузера и системы.exitFullscreen : выход из полноэкранного режима и переход в обычный режим.Давайте рассмотрим типичный пример использования полноэкранного режима для просмотра видео:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Демо-полноэкранный режим
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<дел>
Этот API делает возможным полноэкранный режим нашей веб-страницы. Он позволяет вам выбрать элемент, который вы хотите просмотреть в полноэкранном режиме, затем отключает такие функции окна браузера, как строка URL-адреса, панель окна, и отображает элемент целиком. ширина и высота системы.
В телефонах Android будет удалено окно браузера и пользовательский интерфейс Android, в котором отображается состояние сети и состояние батареи, и отобразится элемент во всю ширину системы Android.
</div>
<div class="video-stage">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Переключить полноэкранный режим</button>
</div>
<дел>
Этот API делает возможным полноэкранный режим нашей веб-страницы. Он позволяет вам выбрать элемент, который вы хотите просмотреть в полноэкранном режиме, затем отключает такие функции окна браузера, как строка URL-адреса, панель окна, и отображает элемент целиком. ширина и высота системы.
В телефонах Android будет удалено окно браузера и пользовательский интерфейс Android, в котором отображается состояние сети и состояние батареи, и отобразится элемент во всю ширину системы Android.
</div>
</div>
</div>
</div>
</тело>
<скрипт>
константа л = console.log
переключатель функции() {
const videoStageEl = document.querySelector(".video-stage")
если (videoStageEl.requestFullscreen) {
если(!document.fullscreenElement){
видеоStageEl.requestFullscreen()
}
еще {
документ.exitFullscreen()
}
} еще {
error.innerHTML = «Это устройство не поддерживает полноэкранный API»
error.classList.remove("закрыть")
}
}
</script> Как вы можете видеть, элемент видео находится в элементе div#video-stage с кнопкой «Переключить полноэкранный режим».
Мы хотим, чтобы элемент div#video-stage отображал полноэкранный режим при нажатии кнопки для переключения на полноэкранный режим. Реализация функции toggle следующая:
function toggle() {
const videoStageEl = document.querySelector(".video-stage")
если(!document.fullscreenElement)
видеоStageEl.requestFullscreen()
еще
документ.exitFullscreen()
} Здесь querySelector используется для поиска элемента div#video-stage и сохранения его экземпляра HTMLDivElement в videoStageEl .
Затем используйте свойство document.fullsreenElement , чтобы определить, является ли document полноэкранным, чтобы можно было вызвать requestFullscreen() для videoStageEl . Это приведет к тому, что div#video-stage займет все окно устройства.
Если вы нажмете кнопку «Переключить полноэкранный режим» в полноэкранном режиме, для document будет вызвана exitFullcreen , так что представление пользовательского интерфейса вернется к обычному виду (выход из полноэкранного режима).
Связанные ресурсы:
API Web Speech API Web Speech обеспечивает синтез и распознавание речи. Добавлена функциональность. к веб-приложениям. Используя этот API, мы сможем подавать голосовые команды веб-приложениям, как на Android через Google Speech или с помощью Cortana в Windows.
Давайте рассмотрим простой пример использования Web Speech API для реализации преобразования текста в речь и речи в текст:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div id="error" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Демо — преобразование текста в речь
</div>
<div class="web-api-card-body">
<дел>
<input Placeholder="Введите текст здесь" type="text" id="textToSpeech" />
</div>
<дел>
<button onclick="speak()">Нажмите, чтобы говорить</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Демо — речь в текст
</div>
<div class="web-api-card-body">
<дел>
<textarea Placeholder="Здесь появится текст, когда вы начнете говорить." id="speechToText"></textarea>
</div>
<дел>
<button onclick="tapToSpeak()">Нажмите и говорите в микрофон</button>
</div>
</div>
</div>
</div>
</тело>
<скрипт>
пытаться {
вар речь = новый SpeechSynthesisUtterance()
вар SpeechRecognition = SpeechRecognition;
распознавание вар = новое SpeechRecognition()
} поймать(е) {
error.innerHTML = «Это устройство не поддерживает API Web Speech»
error.classList.remove("закрыть")
}
функция говорить() {
речь.текст = текстToSpeech.значение
речь.объем = 1
речь.рейт=1
речь.питч=1
window.speechSynthesis.speak(речь)
}
функция TapToSpeak() {
признание.onstart = функция() { }
признание.онрезультат = функция(событие) {
const curr = event.resultIndex
const расшифровка = event.results[curr][0].transcript
речьToText.value = расшифровка
}
признание.onerror = функция (ев) {
console.error(ев)
}
признание.start()
}
</скрипт> 
Первая демонстрация — Text to Speech демонстрирует использование этого API с простым полем ввода, принимающим вводимый текст, и кнопкой для выполнения речевых операций.
функция говорить() {
константная речь = новый SpeechSynthesisUtterance()
речь.текст = текстToSpeech.значение
речь.объем = 1
речь.рейт = 1
речь.питч = 1
window.speechSynthesis.speak(речь)
} Он создает экземпляр объекта SpeechSynthesisUtterance() и устанавливает текст для произнесения из текста, введенного в поле ввода. Затем используйте speech объект для вызова функции SpeechSynthesis#speak , чтобы произнести текст в поле ввода в динамике.
Вторая демо-версия Demo — Speech to Text распознает речь как текст. Нажмите кнопку «Нажать и говорить в микрофон» и говорите в микрофон, и то, что мы говорим, будет переведено в содержимое поля ввода текста.
Нажатие кнопки «Нажми и говори в микрофон» вызовет функцию TapToSpeak:
function TapToSpeak() {
вар SpeechRecognition = SpeechRecognition;
константное распознавание = новое SpeechRecognition()
признание.onstart = функция() { }
признание.онрезультат = функция(событие) {
const curr = event.resultIndex
const расшифровка = event.results[curr][0].transcript
речьToText.value = расшифровка
}
признание.onerror = функция (ев) {
console.error(ев)
}
признание.start()
} Здесь создается экземпляр SpeechRecognition , а затем регистрируются обработчики событий и обратные вызовы. onstart вызывается, когда начинается распознавание речи, onerror вызывается, когда возникает ошибка. Всякий раз, когда распознавание речи захватывает строку, вызывается onresult .
В обратном вызове onresult извлеките содержимое и поместите его в textarea . Поэтому, когда мы говорим в микрофон, текст появляется в содержимом textarea .
Связанные ресурсы:
API Bluetooth позволяет нам получать доступ к устройствам с низким энергопотреблением на мобильные телефоны с Bluetooth-устройством и использовать его для обмена данными с веб-страницы на другое устройство.
Базовый API — navigator.bluetooth.requestDevice . Вызов этого приведет к тому, что браузер предложит пользователю выбрать устройство, где пользователь может выбрать устройство или отменить запрос. navigator.bluetooth.requestDevice требует наличия обязательного объекта. Этот объект определяет фильтр, который возвращает устройства Bluetooth, соответствующие фильтру.
Давайте рассмотрим простой пример использования API navigator.bluetooth.requestDevice для получения базовой информации об устройстве с устройства BLE:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Демо-Bluetooth
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<дел>
<div>Имя устройства: <span id="dname"></span></div>
<div>Идентификатор устройства: <span id="did"></span></div>
<div>Устройство подключено: <span id="dconnected"></span></div>
</div>
<дел>
<button onclick="bluetoothAction()">Получить устройство BLE</button>
</div>
</div>
</div>
</div>
</тело>
<скрипт>
функция bluetoothAction(){
если (navigator.bluetooth) {
navigator.bluetooth.requestDevice({
принятьAllDevices: правда
}).then(устройство => {
dname.innerHTML = устройство.имя
Did.innerHTML = device.id
dconnected.innerHTML = устройство.connected
}).catch(err => {
error.innerHTML = "О боже!! Что-то пошло не так."
error.classList.remove("закрыть")
})
} еще {
error.innerHTML = "Bluetooth не поддерживается."
error.classList.remove("закрыть")
}
}
</скрипт> 
Здесь будет отображаться информация об устройстве. Нажатие кнопки «Получить устройство BLE» вызовет функцию bluetoothAction :
function bluetoothAction(){
navigator.bluetooth.requestDevice({
принятьAllDevices: правда
}).then(устройство => {
dname.innerHTML = устройство.имя
Did.innerHTML = device.id
dconnected.innerHTML = устройство.connected
}).catch(err => {
console.error("О боже!! Что-то пошло не так.")
})
} Функция bluetoothAction вызывает API navigator.bluetooth.requestDevice с параметром acceptAllDevices：true , что заставит его сканировать и составлять список всех ближайших активных устройств Bluetooth. Он возвращает promise , поэтому разрешите его, чтобы получить параметр устройства из функции обратного вызова. Этот параметр устройства будет содержать информацию о указанном устройстве Bluetooth. Здесь мы используем его свойства для отображения информации на устройстве.
Связанные ресурсы:
API вибрации API вибрации может заставить наше устройство вибрировать, как A способ, которым мы должны реагировать на уведомления или физическую обратную связь о новых данных или информации.
Метод вибрации — navigator.vibrate(pattern) . pattern — это одно число или массив чисел, описывающий шаблон вибрации.
Это приведет к тому, что устройство перестанет вибрировать через 200 миллисекунд:
navigator.vibrate(200) navigator.vibrate([200])
Это заставит устройство вибрировать в течение 200 мс, сделать паузу в течение 300 мс и, наконец, вибрировать в течение 400 мс и остановиться:
navigator.vibrate([200, 300, 400])
можно передать 0, [], [0,0,0] для устранения вибрации.
Давайте рассмотрим простой пример:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Демо-вибрация
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<дел>
<input id="vibTime" type="number" Placeholder="Время вибрации" />
</div>
<дел>
<button onclick="vibrate()">Вибрация</button>
</div>
</div>
</div>
</div>
</тело>
<скрипт>
если (navigator.vibrate) {
функция вибрации() {
константное время = vibTime.value
если(время != "")
navigator.vibrate(время)
}
} еще {
error.innerHTML = «API вибрации не поддерживается на этом устройстве».
error.classList.remove("закрыть")
}
</script> Здесь есть поле ввода и кнопка. Введите продолжительность вибрации в поле ввода и нажмите кнопку. Наше устройство будет вибрировать в течение введенного времени.
Связанные ресурсы:
широковещательного канала позволяет осуществлять различные просмотры из одного и того же источника. Контекст передает сообщения или данные. Среди них контекст просмотра относится к окнам, вкладкам, iframe, рабочим процессам и т. д.
Класс BroadcastChannel используется для создания канала или присоединения к нему:
const policyChannel = new BroadcastChannel("politics") politics — это имя канала. Любой контекст, который инициализирует конструктор BroadcastChannel с использованием politics присоединится к каналу politics . Он будет получать любые сообщения. отправляет сообщения на канал и может отправлять сообщения на канал.
Если это первый конструктор BroadcastChannel с politics , канал будет создан. Вы можете использовать BroadcastChannel.postMessage API для публикации сообщений в канале. Используйте API BroadcastChannel.onmessage для подписки на сообщения канала.
Давайте посмотрим на простое приложение для чата:
<body>
<заголовок>
<h2>Веб-API<h2>
</header>
<div class="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Демо-трансляция канала
</div>
<div class="web-api-card-body">
<div class="page-info">Откройте эту страницу в другой <i>вкладке</i>, <i>окне</i> или <i>iframe</i>, чтобы пообщаться с ними.</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="Введите сообщение" />
<button onclick="sendMsg()">Отправить сообщение на канал</button>
</div>
</div>
</div>
</div>
</тело>
<скрипт>
константа л = console.log;
пытаться {
var policyChannel = новый BroadcastChannel("политика")
policyChannel.onmessage = onMessage
вар userId = Date.now()
} поймать(е) {
error.innerHTML = «API BroadcastChannel не поддерживается на этом устройстве».
error.classList.remove("закрыть")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
отправитьMsg()
}
})
функция 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
}
функция sendMsg() {
policyChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Я</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
input.value = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Вот простой текст и кнопка. Введите свое сообщение и нажмите кнопку, чтобы отправить его. Следующее инициализирует politicalChannel и устанавливает прослушиватель событий onmessage в politicalChannel чтобы он мог получать и отображать сообщения.
Нажатие кнопки вызовет функцию sendMsg . Он отправляет сообщения в канал politics через API BroadcastChannel#postMessage . Любая вкладка, iframe или рабочий процесс, инициализирующий этот скрипт, будут получать сообщения, отправленные отсюда, поэтому эта страница будет получать сообщения, отправленные из других контекстов. Связанные ресурсы:
Операции с буфером обмена, такие как копирование, вырезание и вставка, являются приложениями. Некоторые из наиболее распространенных функций в . API буфера обмена позволяет веб-пользователям получать доступ к системному буферу обмена и выполнять основные операции с ним.
Раньше для взаимодействия с системным буфером обмена можно было использовать document.execCommand . Современный API асинхронного буфера обмена обеспечивает прямой доступ для чтения и записи содержимого буфера обмена.
Прочитайте содержимое из буфера обмена:
navigator.clipboard.readText().then(clipText =>
document.getElementById("исходящие").innerText = clipText
); Запись содержимого в буфер обмена:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* буфер обмена успешно установлен */
}, функция() {
/* запись в буфер обмена не удалась */
});
} Ресурсы по теме:
Share API может помочь нам реализовать функции совместного использования в веб-приложениях. Это дает ощущение совместного использования на мобильных устройствах. Это позволяет обмениваться текстом, файлами и ссылками с другими приложениями на вашем устройстве.
Доступ к API веб-ресурсов можно получить через метод navigator.share :
if (navigator.share) {
navigator.share({
название: 'Байду',
текст: «Байду»,
URL: '<https://www.baidu.com/>',
})
.then(() => console.log('Общий доступ успешен'))
.catch((error) => console.log('Ошибка совместного доступа', ошибка));
} Приведенный выше код реализует совместное использование текста с использованием встроенного JavaScript. Обратите внимание, что мы можем вызвать эту операцию только с помощью события onclick :
function Share({ label, text, title }) {
const ShareDetails = {title, text};
const handleSharing = async () => {
если (navigator.share) {
пытаться {
await navigator.share(shareDetails).then(() => console.log("Отправлено");
} поймать (ошибка) {
console.log(`Ой! Я не смог поделиться с миром, потому что: ${error}`);
}
} еще {
// запасной код
консоль.log(
«Общий веб-ресурс в настоящее время не поддерживается в этом браузере. Пожалуйста, предоставьте обратный вызов»
);
}
};
возвращаться (
<button onClick={handleSharing}>
<span>{label</span>
</кнопка>
);
} Ресурсы по теме: