Web API에는 DOM 액세스와 같은 작은 작업부터 오디오 및 비디오 처리와 같은 복잡한 작업을 수행하는 데 사용할 수 있는 매우 유용한 개체, 속성 및 함수가 있습니다. 일반적인 API에는 Canvas, Web Worker, History, Fetch 등이 포함됩니다. 흔하지는 않지만 유용한 웹 API를 살펴보겠습니다!
전체 텍스트 개요:
웹 오디오 API
전체 화면 API
웹 음성 API
웹 블루투스 API
진동 API
방송 채널 API
클립보드 API
웹 공유 API
오디오 API를 사용하면 웹에서 오디오 스트림을 작동할 수 있으며 오디오를 추가하는 데 사용할 수 있습니다. 웹 효과 및 필터의 소스. 오디오 소스는 <audio> , 비디오/오디오 소스 파일 또는 오디오 네트워크 스트림에서 가져올 수 있습니다.
예를 살펴보겠습니다:
<body>
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모 오디오
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<오디오 컨트롤 src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">초기화</button>
<button onclick="audioFromAudioFile.play()">재생</button>
<button onclick="audioFromAudioFile.pause()">일시중지</button>
<button onclick="audioFromAudioFile.stop()">중지</button>
</div>
<div>
<span>볼륨: <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>
</body>
<스크립트>
const l = console.log
audioFromAudioFile = (함수() {
var audioContext
varvolNode
varpanner노드
var 미디어소스
함수 초기화() {
l("초기화")
노력하다 {
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)
}
잡기(e) {
error.innerHTML = "이 장치는 웹 오디오 API를 지원하지 않습니다."
error.classList.remove("닫기")
}
}
함수 플레이() {
오디오.재생()
}
함수 일시 중지() {
오디오.일시 중지()
}
함수 중지() {
오디오.정지()
}
함수 변경볼륨() {
volNode.gain.value = this.value
l("볼륨 범위:",this.value)
}
함수changePan() {
pannerNode.gain.value = this.value
l("팬 범위:",this.value)
}
반품 {
초기화,
놀다,
정지시키다,
멈추다,
체인지팬,
볼륨 변경
}
})()
</script> 이 예제는 오디오를 <audio> 요소에서 AudioContext 로 전송합니다. 사운드 효과(예: 패닝)는 오디오 출력(스피커)으로 출력되기 전에 오디오 소스에 추가됩니다.
ButtonInit는 클릭 시 init 함수를 호출합니다. 그러면 AudioContext 인스턴스가 생성되어 audioContext 로 설정됩니다. 다음으로, 오디오 요소를 오디오 소스로 전달하여 미디어 소스 createMediaElementSource(audio) 생성합니다. 볼륨 노드 volNode createGain 에 의해 생성되며 볼륨을 조정하는 데 사용할 수 있습니다. 다음으로 StereoPannerNode 사용하여 패닝 효과를 설정하고 마지막으로 노드를 미디어 소스에 연결합니다.
버튼(재생, 일시 정지, 정지)을 클릭하면 오디오를 재생, 일시 정지, 정지할 수 있습니다. 페이지에는 볼륨 및 팬 범위 슬라이더가 있으며 슬라이더를 밀어 오디오 볼륨 및 팬 효과를 조정할 수 있습니다.
관련 리소스:
전체 화면 API는 웹에서 전체 화면 모드를 활성화하는 데 사용됩니다. 애플리케이션을 사용하면 페이지/요소를 전체 화면 모드로 볼 수 있습니다. 안드로이드 휴대폰에서는 브라우저 창과 안드로이드 상단의 상태 표시줄(네트워크 상태, 배터리 상태 등이 표시되는 곳)에서 오버플로됩니다.
전체 화면 API 방법:
requestFullscreen : 선택한 요소를 시스템의 전체 화면 모드로 표시하고 다른 애플리케이션은 물론 브라우저 및 시스템 UI 요소를 닫습니다.exitFullscreen : 전체 화면 모드를 종료하고 일반 모드로 전환합니다.동영상
을 시청하기 위해 전체 화면 모드를 사용하는 일반적인 예를 살펴보겠습니다.
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모-전체 화면
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
이 API는 웹페이지의 전체 화면 모드를 가능하게 하며 전체 화면 모드에서 보려는 요소를 선택한 다음 URL 표시줄, 창 창과 같은 브라우저 창 기능을 종료하고 전체 화면을 가져오는 요소를 표시합니다. 시스템의 너비와 높이.
Android 휴대폰에서는 네트워크 상태, 배터리 상태가 표시되는 Android UI와 브라우저 창을 제거하고 Android 시스템의 전체 너비에 요소를 표시합니다.
</div>
<div 클래스="비디오-스테이지">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">전체 화면 전환</button>
</div>
<div>
이 API는 웹페이지의 전체 화면 모드를 가능하게 하며 전체 화면 모드에서 보려는 요소를 선택한 다음 URL 표시줄, 창 창과 같은 브라우저 창 기능을 종료하고 전체 화면을 가져오는 요소를 표시합니다. 시스템의 너비와 높이.
Android 휴대폰에서는 네트워크 상태, 배터리 상태가 표시되는 Android UI와 브라우저 창을 제거하고 Android 시스템의 전체 너비에 요소를 표시합니다.
</div>
</div>
</div>
</div>
</body>
<스크립트>
const l =console.log
함수 토글() {
const videoStageEl = document.querySelector(".video-stage")
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
또 다른 {
document.exitFullscreen()
}
} 또 다른 {
error.innerHTML = "이 장치는 전체 화면 API를 지원하지 않습니다."
error.classList.remove("닫기")
}
}
</script> 보시다시피 비디오 요소는 전체 화면 전환 버튼이 있는 div#video-stage 요소에 있습니다.
전체 화면으로 전환하기 위해 버튼을 클릭하면 div#video-stage 요소가 전체 화면으로 표시되기를 원합니다. toggle 함수의 구현은 다음과 같습니다.
functionggle() {
const videoStageEl = document.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestFullscreen()
또 다른
document.exitFullscreen()
} 여기서 querySelector 는 div#video-stage 요소를 찾고 해당 HTMLDivElement 인스턴스를 videoStageEl 에 저장하는 데 사용됩니다.
그런 다음 document.fullsreenElement 속성을 사용하여 document 전체 화면인지 확인하면 videoStageEl 에서 requestFullscreen() 호출할 수 있습니다. 이렇게 하면 div#video-stage 전체 장치 보기를 차지하게 됩니다.
전체 화면 모드에서 Toggle Fullscreen 버튼을 클릭하면 document 에 대해 exitFullcreen 호출되어 UI 보기가 일반 보기(전체 화면 종료)로 돌아갑니다.
관련 리소스:
Web Speech API는 음성 합성 및 음성 인식 기능을 추가했습니다. 웹 애플리케이션에. 이 API를 사용하면 Google Speech를 통해 Android에서나 Windows에서 Cortana를 사용하는 것처럼 웹 애플리케이션에 음성 명령을 내릴 수 있습니다.
Web Speech API를 사용하여 텍스트 음성 변환 및 음성 텍스트 변환을 구현하는 간단한 예를 살펴보겠습니다
.
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div id="error" class="close"></div>
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모 - 텍스트 음성 변환
</div>
<div class="web-api-card-body">
<div>
<input placeholder="여기에 텍스트를 입력하세요" type="text" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">탭하여 말하기</button>
</div>
</div>
</div>
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모 - 음성을 텍스트로 변환
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="말하기 시작하면 여기에 텍스트가 표시됩니다."
</div>
<div>
<button onclick="tapToSpeak()">탭하여 마이크에 대고 말하기</button>
</div>
</div>
</div>
</div>
</body>
<스크립트>
노력하다 {
var speech = new SpeechSynthesisUtterance()
var SpeechRecognition = SpeechRecognition;
var 인식 = 새로운 SpeechRecognition()
} 잡기(e) {
error.innerHTML = "이 장치는 Web Speech API를 지원하지 않습니다."
error.classList.remove("닫기")
}
함수 말하기() {
speech.text = textToSpeech.value
음성.볼륨 = 1
음성.속도=1
speech.pitch=1
window.speechSynesis.speak(음성)
}
함수 tapToSpeak() {
recognition.onstart = 함수() { }
recognition.onresult = 함수(이벤트) {
const curr = event.resultIndex
const 사본 = event.results[curr][0].transcript
speechToText.value = 대본
}
recognition.onerror = 함수(ev) {
console.error(ev)
}
인식.시작()
}
</script> 
첫 번째 데모인 Text to Speech는 입력 텍스트를 수신하는 간단한 입력 필드와 음성 작업을 수행하는 버튼과 함께 이 API를 사용하는 방법을 보여줍니다.
함수 말하기() {
const speech = 새로운 SpeechSynthesisUtterance()
speech.text = textToSpeech.value
음성.볼륨 = 1
음성 속도 = 1
speech.pitch = 1
window.speechSynesis.speak(음성)
} SpeechSynthesisUtterance() 개체를 인스턴스화하고 입력 상자에 입력된 텍스트에서 말할 텍스트를 설정합니다. 그런 다음 speech 개체를 사용하여 SpeechSynthesis#speak 함수를 호출하여 스피커의 입력 상자에 있는 텍스트를 말합니다.
두 번째 데모 데모 - Speech to Text는 음성을 텍스트로 인식합니다. 탭하고 마이크에 말하기 버튼을 클릭하고 마이크에 말하면 우리가 말하는 내용이 텍스트 입력 상자의 내용으로 번역됩니다.
Tap and Speak into Mic 버튼을 클릭하면 tapToSpeak 함수가 호출됩니다.
function tapToSpeak() {
var SpeechRecognition = SpeechRecognition;
const 인식 = 새로운 SpeechRecognition()
recognition.onstart = 함수() { }
recognition.onresult = 함수(이벤트) {
const curr = event.resultIndex
const 사본 = event.results[curr][0].transcript
speechToText.value = 대본
}
recognition.onerror = 함수(ev) {
console.error(ev)
}
인식.시작()
} 여기서 SpeechRecognition 이 인스턴스화되고 이벤트 핸들러와 콜백이 등록됩니다. onstart 음성 인식이 시작될 때 호출되고, onerror 오류가 발생할 때 호출됩니다. 음성 인식이 라인을 캡처할 때마다 onresult 호출됩니다.
onresult 콜백에서 내용을 추출하여 textarea 에 설정합니다. 따라서 마이크에 대고 말하면 textarea 내용에 텍스트가 나타납니다.
관련 리소스:
블루투스 API를 사용하면 저전력 장치에 액세스할 수 있습니다. 휴대폰 Bluetooth 강화 장치를 사용하여 웹 페이지의 데이터를 다른 장치와 공유합니다.
기본 API는 navigator.bluetooth.requestDevice 입니다. 이를 호출하면 브라우저는 사용자에게 장치 선택기를 표시하고 사용자는 장치를 선택하거나 요청을 취소할 수 있습니다. navigator.bluetooth.requestDevice 필수 개체가 필요합니다. 이 객체는 필터와 일치하는 Bluetooth 장치를 반환하는 필터를 정의합니다.
BLE
navigator.bluetooth.requestDevice 에서 기본 장치 정보를 검색하는 간단한 예를 살펴보겠습니다.
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모-블루투스
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<div>장치 이름: <span id="dname"></span></div>
<div>기기 ID: <span id="did"></span></div>
<div>연결된 기기: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">BLE 장치 가져오기</button>
</div>
</div>
</div>
</div>
</body>
<스크립트>
함수 bluetoothAction(){
if(navigator.bluetooth) {
navigator.bluetooth.requestDevice({
acceptAllDevices: 사실
}).then(장치 => {
dname.innerHTML = 장치.이름
did.innerHTML = 장치.id
dconnected.innerHTML = 장치.연결됨
}).catch(err => {
error.innerHTML = "맙소사!! 뭔가 잘못됐어요."
error.classList.remove("닫기")
})
} 또 다른 {
error.innerHTML = "블루투스는 지원되지 않습니다."
error.classList.remove("닫기")
}
}
</script> 
여기에 장치 정보가 표시됩니다. Get BLE Device 버튼을 클릭하면 bluetoothAction 함수가 호출됩니다.
function bluetoothAction(){
navigator.bluetooth.requestDevice({
acceptAllDevices: 사실
}).then(장치 => {
dname.innerHTML = 장치.이름
did.innerHTML = 장치.id
dconnected.innerHTML = 장치.연결됨
}).catch(err => {
console.error("맙소사!! 뭔가 잘못됐어요.")
})
} bluetoothAction 함수는 acceptAllDevices：true 옵션을 사용하여 navigator.bluetooth.requestDevice API를 호출합니다. 그러면 근처의 모든 Bluetooth 활성 장치를 검색하고 나열하게 됩니다. 이는 promise 를 반환하므로 콜백 함수에서 장치 매개변수를 가져오도록 해결합니다. 이 장치 매개변수는 나열된 블루투스 장치의 정보를 보유합니다. 여기에서 해당 속성을 사용하여 장치에 정보를 표시합니다.
관련 리소스:
진동 API는 A처럼 장치를 진동시킬 수 있습니다. 새로운 데이터나 정보에 대한 알림이나 물리적 피드백에 응답해야 하는 방식입니다.
진동을 수행하는 방법은 navigator.vibrate(pattern) 입니다. pattern 진동 패턴을 설명하는 단일 숫자 또는 숫자 배열입니다.
이렇게 하면 200밀리초 후에 장치의 진동이 중지됩니다:
navigator.vibrate(200) navigator.vibrate([200])
이렇게 하면 장치가 200ms 동안 진동하고 300ms 동안 일시 정지한 다음 마지막으로 400ms 동안 진동하고 중지됩니다.
navigator.vibrate([200, 300, 400])은
0을 전달할 수 있습니다. [], [ 0,0,0] 진동을 제거합니다.
간단한 예를 살펴보겠습니다:
<body>
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div 클래스="웹-API-카드">
<div class="web-api-card-head">
데모 진동
</div>
<div class="web-api-card-body">
<div id="error" class="close"></div>
<div>
<input id="vibTime" type="number" placeholder="진동 시간" />
</div>
<div>
<button onclick="vibrate()">진동</button>
</div>
</div>
</div>
</div>
</body>
<스크립트>
if(navigator.vibrate) {
함수 진동() {
const 시간 = vibTime.value
if(시간 != "")
navigator.vibrate(시간)
}
} 또 다른 {
error.innerHTML = "이 장치에서는 진동 API가 지원되지 않습니다."
error.classList.remove("닫기")
}
</script> 여기에는 입력 상자와 버튼이 있습니다. 입력창에 진동 지속 시간을 입력하고 버튼을 누릅니다. 입력한 시간 동안 기기가 진동합니다.
관련 리소스:
브로드캐스트 채널 API를 사용하면 동일한 출처 에서 다양한 검색이 가능합니다. 컨텍스트는 메시지나 데이터를 전달합니다. 그 중 브라우징 컨텍스트는 창, 탭, iframe, 워커 등을 의미합니다.
BroadcastChannel 클래스는 채널을 생성하거나 참여하는 데 사용됩니다.
constpoliticsChannel = new BroadcastChannel("politics") politics politics 채널의 이름입니다.politics politics 사용하여 BroadcastChannel 생성자를 초기화하는 모든 컨텍스트는 모든 메시지를 수신합니다. 채널에서 메시지를 보내고 채널로 메시지를 보낼 수 있습니다.
politics 포함된 첫 번째 BroadcastChannel 생성자인 경우 채널이 생성됩니다. BroadcastChannel.postMessage API 사용하여 채널에 메시지를 게시할 수 있습니다. BroadcastChannel.onmessage API를 사용하여 채널 메시지를 구독하세요.
간단한 채팅 애플리케이션을 살펴보겠습니다:
<body>
<헤더>
<h2>웹 API<h2>
</header>
<div 클래스="웹-api-cnt">
<div 클래스="웹-API-카드">
<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 클래스="chatArea">
<input id="input" type="text" placeholder="메시지를 입력하세요" />
<button onclick="sendMsg()">채널에 메시지 보내기</button>
</div>
</div>
</div>
</div>
</body>
<스크립트>
const l = console.log;
노력하다 {
varpoliticsChannel = new BroadcastChannel("정치")
politicsChannel.onmessage = onMessage
var userId = Date.now()
} 잡기(e) {
error.innerHTML = "BroadcastChannel API는 이 장치에서 지원되지 않습니다."
error.classList.remove("닫기")
}
input.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
메시지 보내기()
}
})
함수 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() {
politicsChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>나</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + newHTML
입력.값 = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> 여기에 간단한 텍스트와 버튼이 있습니다. 메시지를 입력하고 버튼을 누르면 전송됩니다. 다음은 politicalChannel 초기화하고 메시지를 수신하고 표시할 수 있도록 politicalChannel 에 onmessage 이벤트 리스너를 설정합니다.
버튼을 클릭하면 sendMsg 함수가 호출됩니다. BroadcastChannel#postMessage API를 통해 politics 채널에 메시지를 보냅니다. 이 스크립트를 초기화하는 모든 탭, iframe 또는 작업자는 여기에서 전송된 메시지를 수신하므로 이 페이지는 다른 컨텍스트에서 전송된 메시지를 수신합니다. 관련 리소스:
복사, 잘라내기, 붙여넣기 등의 클립보드 작업은 애플리케이션입니다 일부 의 가장 일반적인 기능 중 . Clipboard API를 사용하면 웹 사용자가 시스템 클립보드에 액세스하고 기본 클립보드 작업을 수행할 수 있습니다.
이전에는 document.execCommand 사용하여 시스템 클립보드와 상호 작용할 수 있었습니다. 최신 비동기 클립보드 API는 클립보드의 내용을 읽고 쓸 수 있는 직접 액세스를 제공합니다.
클립보드에서 콘텐츠 읽기:
navigator.clipboard.readText().then(clipText =>
document.getElementById("outbox").innerText = 클립텍스트
); 클립보드에 내용 쓰기:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).then(function() {
/* 클립보드가 성공적으로 설정되었습니다 */
}, 기능() {
/* 클립보드 쓰기 실패 */
});
} 관련 자료:
공유 API는 웹 애플리케이션에서 공유 기능을 구현하는 데 도움이 될 수 있습니다. 모바일 네이티브 공유 느낌을 제공합니다. 이를 통해 장치의 다른 응용 프로그램에 대한 텍스트, 파일 및 링크를 공유할 수 있습니다.
웹 공유 API는 navigator.share 메소드를 통해 접근할 수 있습니다:
if (navigator.share) {
navigator.share({
제목: '바이두',
텍스트: '바이두',
URL: '<https://www.baidu.com/>',
})
.then(() => console.log('공유 성공'))
.catch((error) => console.log('공유 실패', error));
} 위 코드는 기본 JavaScript를 사용하여 텍스트 공유를 구현합니다. onclick 이벤트를 통해서만 이 작업을 호출할 수 있습니다.
function Share({ label, text, title }) {
const shareDetails = { 제목, 텍스트 };
const handlerSharing = async () => {
if (navigator.share) {
노력하다 {
wait navigator.share(shareDetails).then(() => console.log("Sent"));
} 잡기(오류) {
console.log(`죄송합니다. ${error} 때문에 전 세계에 공유할 수 없습니다`);
}
} 또 다른 {
// 대체 코드
콘솔.로그(
"현재 이 브라우저에서는 웹 공유가 지원되지 않습니다. 콜백을 제공하십시오"
);
}
};
반품 (
<버튼 onClick={handleSharing}>
<span>{라벨}</span>
</버튼>
);
} 관련 자료: