Web API には、DOM へのアクセスなどの小さなタスクから、オーディオやビデオの処理などの複雑なタスクを実行するために使用できる、非常に便利なオブジェクト、プロパティ、関数があります。一般的な API には、Canvas、Web Worker、History、Fetch などが含まれます。珍しいけれど便利な Web API をいくつか見てみましょう。
全文概要:
Web オーディオ API
フルスクリーン API
Web 音声 API
Web Bluetooth API
振動 API
ブロードキャスト チャネル API
クリップボード API
Web 共有 API
オーディオ API を使用すると、Web 上のオーディオ ストリームを操作でき、オーディオを追加するために使用できます。 Web エフェクトとフィルターのソース。オーディオ ソースは、 <audio> 、ビデオ/オーディオ ソース ファイル、またはオーディオ ネットワーク ストリームから取得できます。
例を見てみましょう:
<body>
<ヘッダー>
<h2>Web API<h2>
</ヘッダ>
<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>
<div>
<audio Controls src = "./ audio.mp3" id = "audio"> </audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">初期化</button>
<button onclick="audioFromAudioFile.play()">再生</button>
<button onclick = "audiofromaudiofile.pause（）"> Pause </button>
<button onclick="audioFromAudioFile.stop()">停止</button>
</div>
<div>
<span> vol：<input onchange = "audiofromaudiofile.changevolume（）" type = "range" id = "vol" min = "1" max = "2" step = "0.01" value = "1" /> < /スパン>
<span> pan：<input onchange = "audiofromaudiofile.changepan（）" type = "range" id = "panner" min = "-1" max = "1" step = "0.01" value = "0" /> < /スパン>
</div>
</div>
</div>
</div>
</body>
<スクリプト>
const l = コンソール.ログ
let audioFromAudioFile = (function() {
var audioContext
varvolノード
varpannerNode
var メディアソース
関数 init() {
l("初期化")
試す {
audioContext = 新しい AudioContext()
mediaSource = audioContext.createMediaElementSource(オーディオ)
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 = "このデバイスは Web Audio API をサポートしていません"
error.classlist.remove（ "close"）
}
}
function play（）{
audio.play（）
}
function pause（）{
audio.pause（）
}
関数stop（）{
audio.stop（）
}
function changevolume（）{
volNode.gain.value = this.value
l（ "vol range："、this.value）
}
関数changePan() {
pannerNode.gain.value = this.value
l("パン範囲:",this.value)
}
戻る {
初期化、
遊ぶ、
一時停止、
停止、
Changepan、
ボリューム変更
}
})()
</script>この例は、 <audio>要素からAudioContextコンテキスト（パンなど）にオーディオソースに追加されてから、オーディオ出力（スピーカー）に追加されます。
ButtunInitは、クリックするとinit関数を呼び出します。 これにより、 AudioContextインスタンスが作成され、 audioContextとして設定されます。 次に、メディアソースcreateMediaElementSource(audio)を作成し、オーディオ要素をオーディオソースとして渡します。ボリュームノードvolNode 、 createGainによって作成され、ボリュームの調整に使用できます。次に、 StereoPannerNode使用してパンニング効果をセットアップし、最後にノードをメディアソースに接続します。
ボタン（再生、一時停止、停止）をクリックして再生し、一時停止し、オーディオを停止します。このページにはボリュームとパン範囲のスライダーがあり、スライダーをスライドさせることでオーディオのボリュームとパン効果を調整できます。
関連リソース：
フルスクリーンAPIは、Webでフルスクリーンモードを有効にするために使用されますアプリケーションでは、フルスクリーンモードでページ/要素を表示できます。 Android電話では、ブラウザウィンドウとAndroidの上部にあるステータスバーがオーバーフルします（ネットワークステータス、バッテリーステータスなどが表示されます）。
フルスクリーンAPIメソッド：
requestFullscreen ：選択した要素をシステムにフルスクリーンモードで表示し、他のアプリケーションとブラウザおよびシステムUI要素を閉じます。exitFullscreen ：フルスクリーンモードを終了し、通常モードに切り替えます。全画面モードを使用してビデオを視聴する一般的な例を見てみましょう
。
<ヘッダー>
<h2> web apis <h2>
</ヘッダ>
<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>
<div>
この API を使用すると、Web ページの全画面モードが可能になり、全画面モードで表示したい要素を選択できるようになり、URL バーやウィンドウ ペインなどのブラウザ ウィンドウの機能がオフになり、要素全体が表示されます。システムの幅と高さ。
Android スマートフォンでは、ネットワーク ステータスやバッテリー ステータスが表示されるブラウザ ウィンドウと Android UI が削除され、要素が Android システムの全幅で表示されます。
</div>
<div class="ビデオステージ">
<video id="video" src="./video.mp4"></video>
<button onclick = "toggle（）"> Toogle Fullscreen </button>
</div>
<div>
このAPIは、Webページのフルスクリーンモードを可能にします。これにより、フルスクリーンモードで表示する要素を選択できます。システムの幅と高さ。
Android電話では、ブラウザウィンドウとAndroid UIがネットワークのステータス、バッテリーステータスが表示され、Androidシステムの全幅の要素が表示されます。
</div>
</div>
</div>
</div>
</body>
<スクリプト>
const l = console.log
関数トグル（）{
const videostageel = document.queryselector（ "。ビデオステージ"）
if(videoStageEl.requestFullscreen) {
if(!document.fullscreenElement){
videoStageEl.requestFullscreen()
}
それ以外 {
document.exitFullscreen()
}
} それ以外 {
error.innerhtml = "このデバイスはフルスクリーンAPIをサポートしていません」
error.classList.remove("閉じる")
}
}
</script>ご覧のとおり、ビデオ要素はdiv＃ビデオステージ要素にあり、ボタントグルフルスクリーンがあります。
ボタンをクリックしてフル画面を切り替えるときに、要素div#video-stageフル画面を表示する必要があります。 toggle関数の実装は次のとおりです。
関数トグル（）{
const videostageel = document.queryselector（ "。ビデオステージ"）
if（！document.fullscreenelement）
videoStageEl.requestFullscreen()
それ以外
document.exitfullscreen（）
}ここで、 querySelectorを使用してdiv#video-stage要素を見つけ、 videoStageElでそのhtmldivelementインスタンスを保存します。
次に、 document.fullsreenElementプロパティを使用して、 documentフル画面であるかどうかを判断するため、 requestFullscreen() videoStageElで呼び出すことができます。 これにより、 div#video-stageデバイス ビュー全体を占めるようになります。
フル画面モードでフルスクリーンのトグルボタンをクリックすると、 documentでexitFullcreenが呼び出され、UIビューが通常ビューに戻ります（フルスクリーンを終了します）。
関連リソース：
WebスピーチAPIは、スピーチの統合と音声認識機能を提供します。 Webアプリケーションへ。このAPIを使用して、GoogleスピーチやWindowsでCortanaを使用してAndroidのように、Webアプリケーションに音声コマンドを発行できます。
Web Speech APIを使用してテキストとスピーチとスピーチとテキストを実装する簡単な例を見てみましょう：
<body>
<ヘッダー>
<h2> web apis <h2>
</ヘッダ>
<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">
<div>
<入力PlaceHolder = "ここにテキストを入力します" type = "text" id = "texttospeech" />
</div>
<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">
<div>
<textarea placeholder = "テキストがここに表示されます
</div>
<div>
<button onclick = "taptospeak（）">タップしてmic </button>に話します
</div>
</div>
</div>
</div>
</body>
<スクリプト>
試す {
var speech = new speechsynthesisteutter（）
var SpeechRecognition = SpeechRecognition;
var認識= new SpeechRecognition（）
} キャッチ(e) {
error.innerhtml = "このデバイスは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（スピーチ）
}
function taptospeak（）{
認識.onstart = function（）{}
承認.OnResult = function（event）{
const curr = event.resultindex
const transcript = event.results [curr] [0] .transcript
SpeechTotext.value = transcript
}
認識.NERROR = function（ev）{
console.error（ev）
}
認識.start（）
}
</script> 
最初のデモ - テキストからスピーチは、このAPIの使用を、入力テキストを受信する単純な入力フィールドと音声操作を実行するボタンを示しています。
function speak（）{
const speech = new speechsynthesisteutter（）
speech.text = texttospeech.value
speech.volume = 1
speech.rate = 1
speech.pitch = 1
window.speechsynthesis.speak（スピーチ）
} SpeechSynthesisUtterance()オブジェクトをインスタンス化し、入力ボックスに入力されたテキストから話すテキストを設定します。 次に、 speechオブジェクトを使用してSpeechSynthesis#speak関数を呼び出して、スピーカーの入力ボックスにテキストを話します。
2番目のデモデモ - テキストへのスピーチは、スピーチをテキストとして認識します。 タップをクリックしてマイクボタンに相談し、マイクに話しかけてください。私たちが言うことは、テキスト入力ボックスのコンテンツに翻訳されます。
タップをクリックしてマイクボタンを表示すると、taptoSpeak関数が呼び出されます：
function taptospeak（）{
var SpeechRecognition = SpeechRecognition;
const認識= new SpeechRecognition（）
認識.onstart = function（）{}
承認.OnResult = function（event）{
const curr = event.resultindex
const transcript = event.results [curr] [0] .transcript
SpeechTotext.value = transcript
}
認識.NERROR = function（ev）{
console.error（ev）
}
認識.start（）
}ここで、 SpeechRecognitionがインスタンス化され、イベントハンドラーとコールバックが登録されます。 onstart音声認識が始まるときに呼び出され、 onerrorエラーが発生したときに呼び出されます。 音声認識が行をキャプチャするたびに、 onresultが呼び出されます。
onresult Callbackで、内容を抽出し、それらをtextareaに設定します。 したがって、マイクに話すと、テキストはtextareaコンテンツに表示されます。
関連リソース：
Bluetooth APIにより、低電力デバイスにアクセスすることができます。携帯電話Bluetoothが強化したデバイスを使用して、それを使用してWebページから別のデバイスまでデータを共有します。
基本的なAPIはnavigator.bluetooth.requestDeviceです。 これを呼び出すと、ユーザーがデバイスを選択したり、リクエストをキャンセルできるデバイスセレクターを使用して、ブラウザにユーザーにプロンプトが表示されます。 navigator.bluetooth.requestDevice必須のオブジェクトが必要です。 このオブジェクトは、フィルターに一致するBluetoothデバイスを返すフィルターを定義します。
navigator.bluetooth.requestDevice
navigator.bluetooth.requestDeviceを使用した簡単な例を見てみましょう。
<ヘッダー>
<h2> web apis <h2>
</ヘッダ>
<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>
<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 device </button>を取得します
</div>
</div>
</div>
</div>
</body>
<スクリプト>
function bluetoothaction（）{
if（navigator.bluetooth）{
navigator.bluetooth.RequestDevice（{
AcceptAllDevices：true
}）。それから（device => {
dname.innerhtml = device.name
did.innerhtml = device.id
dconnected.innerhtml = device.connected
}）。catch（err => {
error.innerhtml = "ああ、何かがうまくいかなかった。"
error.classlist.remove（ "close"）
})
} それ以外 {
error.innerhtml = "Bluetoothはサポートされていません。」
error.classlist.remove（ "close"）
}
}
</script> 
デバイス情報がここに表示されます。 Get BLEデバイスボタンをクリックすると、 bluetoothAction関数が呼び出されます：
function bluetoothaction（）{
navigator.bluetooth.RequestDevice（{
AcceptAllDevices：true
}）。それから（device => {
dname.innerhtml = device.name
did.innerhtml = device.id
dconnected.innerhtml = device.connected
}）。catch（err => {
console.error（ "ああ、何かがうまくいかなかった。"）
})
} bluetoothAction関数はnavigator.bluetooth.requestDevice APIをacceptAllDevices：trueオプションで呼び出します。これにより、近くのすべてのBluetoothアクティブデバイスをスキャンおよびリストします。 promiseを返すため、コールバック関数からパラメーターデバイスを取得するために解決して、このデバイスパラメーターはリストされているBluetoothデバイスの情報を保持します。ここで、そのプロパティを使用してデバイスに情報を表示します。
関連リソース：
apiは、デバイスを振動させることができます。新しいデータまたは情報の通知または物理フィードバックに応答する方法。
振動を実行する方法はnavigator.vibrate(pattern)です。 pattern振動パターンを記述する単一の数字または数字の配列です。
これにより、200ミリ秒後にデバイスが振動を停止します：
navigator.vibrate（200） navigator.vibrate（[200]）
これにより、デバイスは200ミリ秒間振動し、300ミリ秒間一時停止し、最終的に400ミリ秒間振動して停止し
ます
。 []、[0,0,0]振動を排除します。
簡単な例を見てみましょう：
<body>
<ヘッダー>
<h2> web apis <h2>
</ヘッダ>
<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>
<div>
<input id = "vibtime" type = "number" placeholder = "振動時間" />
</div>
<div>
<button onclick = "vibrate（）"> vibrate </button>
</div>
</div>
</div>
</div>
</body>
<スクリプト>
if（navigator.vibrate）{
関数vibrate（）{
const time = vibtime.value
if（time！= ""）
navigator.vibrate（time）
}
} それ以外 {
error.innerhtml = "このデバイスではサポートされていない振動API。"
error.classlist.remove（ "close"）
}
</script>ここには入力ボックスとボタンがあります。 入力ボックスに振動の持続時間を入力し、ボタンを押します。私たちのデバイスは、入力された間振動します。
関連リソース：
developer.mozilla.org/zh-cn/docs/…6
コンテキストはメッセージまたはデータを伝えます。その中で、ブラウジングコンテキストとは、Windows、Tabs、Iframes、Workersなどを指します。
BroadcastChannelクラスは、Const PoliticsChannel =新しいBroadCastChannelpolitics politics BroadcastChannel politics
）
BroadcastChannel作成します
チャネルに送信され、チャネルにメッセージを送信できます。
politicsを持つ最初のBroadcastChannelコンストラクターである場合、チャンネルが作成されます。 BroadcastChannel.postMessage API使用して、メッセージをチャネルに投稿できます。 BroadcastChannel.onmessage APIを使用して、チャネルメッセージをサブスクライブします。
簡単なチャットアプリケーションを見てみましょう：
<body>
<ヘッダー>
<h2> web apis <h2>
</ヘッダ>
<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> tab </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 = "type your message" />
<button onclick = "sendmsg（）"> msgをChannel </button>に送信します
</div>
</div>
</div>
</div>
</body>
<スクリプト>
const l = console.log;
試す {
var PoliticsChannel = new BroadcastChannel（ "Politics"）
PoliticsChannel.onmessage = onmessage
var userid = date.now（）
} キャッチ(e) {
error.innerhtml = "このデバイスではサポートされていないBroadcastChannel API。"
error.classlist.remove（ "close"）
}
input.addeventlistener（ "keydown"、（e）=> {
if（e.keycode === 13 && e.target.value.trim（）。長さ> 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
}
関数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>ここに簡単なテキストとボタンがあります。 メッセージを入力して、ボタンを押して送信します。以下は、 politicalChannel初期化し、 politicalChannelにonmessageイベントリスナーを設定して、メッセージを受信および表示できるようにします。
ボタンをクリックすると、 sendMsg関数が呼び出されます。 BroadcastChannel#postMessage APIを介して、 politicsチャネルにメッセージを送信します。このスクリプトを初期化するタブ、iframe、またはワーカーはここから送信されたメッセージを受信します。そのため、このページは他のコンテキストから送信されたメッセージを受信します。関連リソース：
操作コピー、カット、貼り付けはアプリケーションです
最も一般的な機能の。 Clipboard APIを使用すると、Webユーザーはシステムクリップボードにアクセスし、基本的なクリップボード操作を実行できます。
以前は、 document.execCommand使用してシステムクリップボードと対話することができました。 最新の非同期クリップボードAPIは、クリップボードの内容を読み書きするための直接アクセスを提供します。
クリップボードからコンテンツを読む：
navigator.clipboard.readtext（）。then（cliptext => document.getElementById（ "Outbox"）。innertext = cliptext ）
クリップボードへの書き込み：
updateClipboard（newclip）{
navigator.clipboard.writeText（newClip）.then（function（）{
/ *クリップボードは正常に設定します */
}、 関数（） {
/ *クリップボード書き込み失敗 */
});
}関連リソース：
共有APIは、Webアプリケーションで共有機能を実装するのに役立ちます。それはモバイルネイティブの共有感を与えます。テキスト、ファイル、リンクをデバイス上の他のアプリケーションに共有できるようになります。
Web共有APIはnavigator.shareメソッドを介してアクセスできます。if
（navigator.share）{
navigator.share（{
タイトル：「Baidu」、
テキスト：「Baidu」、
url： '<https://www.baidu.com/>'、
})
.then（（）=> console.log（ '共有成功'））
.catch（（error）=> console.log（ '共有失敗'、エラー））;
}上記のコードは、ネイティブJavaScriptを使用してテキスト共有を実装します。 onclickイベントを使用してこの操作のみを呼び出すことができることに注意してください
。
const sharedetails = {title、text};
const handleSharing = async（）=> {
if（navigator.share）{
試す {
Navigator.share（sharedetails）.then（（）=> console.log（ "sent"））;
} キャッチ (エラー) {
console.log（ `oops！世界と共有できませんでした：$ {error}`）;
}
} それ以外 {
//フォールバックコード
コンソール.log(
「現在、このブラウザではWeb共有はサポートされていません。コールバックを提供してください」
);
}
};
戻る （
<button onclick = {handlesharing}>
<span> {label} </span>
</ボタン>
);
}関連リソース：