Di Web API terdapat objek, properti, dan fungsi yang sangat berguna yang dapat digunakan untuk melakukan tugas-tugas kecil seperti mengakses DOM, hingga tugas-tugas kompleks seperti pemrosesan audio dan video. API umum mencakup Canvas, Web Worker, History, Fetch, dll. Mari kita lihat beberapa Web API yang tidak umum namun berguna!
Ikhtisar teks lengkap:
API Audio Web
API Layar Penuh
API Ucapan
Web API Bluetooth
API Getaran API
Saluran Siaran API
Papan Klip API
Berbagi Web
Audio memungkinkan kami mengoperasikan aliran audio di Web, dan dapat digunakan untuk menambahkan audio sumber di Web Efek dan filter. Sumber audio dapat berasal dari <audio> , file sumber video/audio, atau aliran jaringan audio.
Mari kita lihat contohnya:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="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="kesalahan" class="close"></div>
<div>
<kontrol audio src="./audio.mp3" id="audio"></audio>
</div>
<div>
<button onclick="audioFromAudioFile.init()">Init</button>
<button onclick="audioFromAudioFile.play()">Putar</button>
<button onclick="audioFromAudioFile.pause()">Jeda</button>
<button onclick="audioFromAudioFile.stop()">Berhenti</button>
</div>
<div>
<span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></ rentang>
<span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" />< /rentang>
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
const l = konsol.log
biarkan audioFromAudioFile = (fungsi() {
var audioContext
varvolNode
varpannerNode
var mediaSumber
fungsi init() {
aku("Init")
mencoba {
audioContext = AudioContext baru()
mediaSource = audioContext.createMediaElementSource(audio)
volNode = audioContext.createGain()
volNode.gain.nilai = 1
pannerNode = StereoPannerNode baru(konteks audio, { pan:0 })
mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
}
menangkap(e) {
error.innerHTML = "Perangkat ini tidak mendukung Web Audio API"
error.classList.hapus("tutup")
}
}
fungsi bermain() {
audio.bermain()
}
fungsi jeda() {
audio.jeda()
}
fungsi berhenti() {
audio.berhenti()
}
fungsi perubahanVolume() {
volNode.gain.value = ini.nilai
l("Rentang Vol:",ini.nilai)
}
fungsi perubahanPan() {
pannerNode.gain.value = ini.nilai
l("Pan Range:",ini.nilai)
}
kembali {
inisiasi,
bermain,
berhenti sebentar,
berhenti,
ubahPan,
ubahVolume
}
})()
</script> Contoh ini mentransfer audio dari elemen <audio> ke AudioContext . Efek suara (seperti panning) ditambahkan ke sumber audio sebelum dikeluarkan ke output audio (speaker).
ButtonInit memanggil fungsi init ketika diklik. Ini akan membuat instance AudioContext dan menetapkannya sebagai audioContext . Selanjutnya, ia membuat sumber media createMediaElementSource(audio) , meneruskan elemen audio sebagai sumber audio. Node volume volNode dibuat oleh createGain dan dapat digunakan untuk mengatur volume. Selanjutnya gunakan StereoPannerNode untuk mengatur efek panning, dan terakhir sambungkan node ke sumber media.
Klik tombol (Mainkan, Jeda, Berhenti) untuk memutar, menjeda, dan menghentikan audio. Halaman ini memiliki penggeser volume dan rentang geser, dan Anda dapat menyesuaikan volume audio dan efek geser dengan menggeser penggeser.
Sumber daya terkait:
API Layar Penuh API Layar Penuh digunakan untuk mengaktifkan mode layar penuh di web aplikasi , yang memungkinkan Anda melihat halaman/elemen dalam mode layar penuh. Di ponsel Android, ini meluap ke jendela browser dan bilah status di bagian atas Android (di mana status jaringan, status baterai, dll. ditampilkan).
Metode API layar penuh:
requestFullscreen : Menampilkan elemen yang dipilih dalam mode layar penuh pada sistem, menutup aplikasi lain serta elemen browser dan UI sistem.exitFullscreen : Keluar dari mode layar penuh dan beralih ke mode normal.Mari kita lihat contoh umum penggunaan mode layar penuh untuk menonton video:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Layar Penuh
</div>
<div class="web-api-card-body">
<div id="kesalahan" class="close"></div>
<div>
API ini memungkinkan mode layar penuh halaman web kami. Ini memungkinkan Anda memilih Elemen yang ingin Anda lihat dalam mode layar penuh, lalu mematikan fitur jendela browser seperti bilah URL, panel jendela, dan menampilkan Elemen untuk mengambil keseluruhan. lebar dan tinggi sistem.
Di ponsel Android, ini akan menghapus jendela browser dan UI Android tempat status jaringan, status baterai ditampilkan, dan menampilkan Elemen dalam lebar penuh sistem Android.
</div>
<div class="video-stage">
<video id="video" src="./video.mp4"></video>
<button onclick="toggle()">Toogle Layar Penuh</button>
</div>
<div>
API ini memungkinkan mode layar penuh halaman web kami. Ini memungkinkan Anda memilih Elemen yang ingin Anda lihat dalam mode layar penuh, lalu mematikan fitur jendela browser seperti bilah URL, panel jendela, dan menampilkan Elemen untuk mengambil keseluruhan. lebar dan tinggi sistem.
Di ponsel Android, ini akan menghapus jendela browser dan UI Android tempat status jaringan, status baterai ditampilkan, dan menampilkan Elemen dalam lebar penuh sistem Android.
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
const l =konsol.log
fungsi beralih() {
const videoStageEl = dokumen.querySelector(".video-stage")
if(videoStageEl.requestLayar Penuh) {
if(!document.fullscreenElement){
videoStageEl.requestLayar Penuh()
}
kalau tidak {
dokumen.exitLayar Penuh()
}
} kalau tidak {
error.innerHTML = "Perangkat ini tidak mendukung API Layar Penuh"
error.classList.hapus("tutup")
}
}
</script> Seperti yang Anda lihat, elemen video ada di elemen div#video-stage, dengan tombol Toggle Fullscreen.
Kami ingin elemen div#video-stage menampilkan layar penuh ketika tombol diklik untuk beralih ke layar penuh. Implementasi fungsi toggle adalah sebagai berikut:
fungsi sakelar() {
const videoStageEl = dokumen.querySelector(".video-stage")
if(!document.fullscreenElement)
videoStageEl.requestLayar Penuh()
kalau tidak
dokumen.exitLayar Penuh()
} Di sini, querySelector digunakan untuk menemukan elemen div#video-stage dan menyimpan instance HTMLDivElement di videoStageEl .
Kemudian, gunakan properti document.fullsreenElement untuk menentukan apakah document dalam layar penuh, sehingga requestFullscreen() dapat dipanggil di videoStageEl . Ini akan membuat div#video-stage menempati seluruh tampilan perangkat.
Jika Anda mengklik tombol Toggle Fullscreen dalam mode layar penuh, maka exitFullcreen akan dipanggil pada document , sehingga tampilan UI akan kembali ke tampilan normal (keluar dari layar penuh).
Sumber daya terkait:
Web Speech API menyediakan sintesis ucapan dan pengenalan suara Fungsionalitas ditambahkan ke aplikasi web. Dengan menggunakan API ini kita akan bisa mengeluarkan perintah suara ke aplikasi web, seperti di Android melalui Google Speech-nya atau menggunakan Cortana di Windows.
Mari kita lihat contoh sederhana penggunaan Web Speech API untuk mengimplementasikan text-to-speech dan Speech-to-text:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="web-api-cnt">
<div id="kesalahan" class="close"></div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Teks ke Pidato
</div>
<div class="web-api-card-body">
<div>
<input placeholder="Masukkan teks di sini" type="teks" id="textToSpeech" />
</div>
<div>
<button onclick="speak()">Ketuk untuk Berbicara</button>
</div>
</div>
</div>
<div class="web-api-card">
<div class="web-api-card-head">
Demo - Pidato ke Teks
</div>
<div class="web-api-card-body">
<div>
<textarea placeholder="Teks akan muncul di sini ketika Anda mulai berbicara." id="speechToText"></textarea>
</div>
<div>
<button onclick="tapToSpeak()">Ketuk dan Bicara ke Mikrofon</button>
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
mencoba {
var ucapan = SpeechSynthesisUtterance() baru
var SpeechRecognition = Pengenalan Ucapan;
pengenalan var = SpeechRecognition baru()
} tangkapan(e) {
error.innerHTML = "Perangkat ini tidak mendukung Web Speech API"
error.classList.hapus("tutup")
}
fungsi berbicara() {
pidato.teks = textToSpeech.nilai
pidato.volume = 1
pidato.rate=1
pidato.pitch=1
window.speechSynthesis.speak(ucapan)
}
fungsi tapToSpeak() {
pengakuan.onstart = fungsi() {}
pengakuan.hasil = fungsi(peristiwa) {
const arus = acara.resultIndex
transkrip const = acara.hasil[saat ini][0].transkrip
pidatoToText.value = transkrip
}
pengakuan.onerror = fungsi(ev) {
konsol.kesalahan(ev)
}
pengakuan.mulai()
}
</skrip> 
Demo pertama - Text to Speech mendemonstrasikan penggunaan API ini dengan kolom input sederhana yang menerima teks input dan tombol untuk melakukan operasi ucapan.
fungsi berbicara() {
const ucapan = SpeechSynthesisUtterance() baru
pidato.teks = textToSpeech.nilai
pidato.volume = 1
pidato.rate = 1
ucapan.pitch = 1
window.speechSynthesis.speak(ucapan)
} Ini membuat instance objek SpeechSynthesisUtterance() dan mengatur teks yang akan diucapkan dari teks yang dimasukkan dalam kotak masukan. Kemudian, gunakan objek speech untuk memanggil fungsi SpeechSynthesis#speak untuk mengucapkan teks dalam kotak input di speaker.
Demo kedua Demo - Speech to Text mengenali ucapan sebagai teks. Klik tombol Ketuk dan Bicara ke Mikrofon dan bicaralah ke mikrofon, dan apa yang kami katakan akan diterjemahkan ke dalam konten di kotak input teks.
Mengklik tombol Ketuk dan Bicara ke Mikrofon akan memanggil fungsi tapToSpeak:
function tapToSpeak() {
var SpeechRecognition = Pengenalan Ucapan;
pengenalan const = SpeechRecognition baru()
pengakuan.onstart = fungsi() {}
pengakuan.hasil = fungsi(peristiwa) {
const arus = acara.resultIndex
transkrip const = acara.hasil[saat ini][0].transkrip
pidatoToText.value = transkrip
}
pengakuan.onerror = fungsi(ev) {
konsol.kesalahan(ev)
}
pengakuan.mulai()
} Di sini SpeechRecognition dibuat dan kemudian event handler dan callback didaftarkan. onstart dipanggil ketika pengenalan suara dimulai, onerror dipanggil ketika terjadi kesalahan. Setiap kali pengenalan ucapan menangkap sebuah garis, onresult dipanggil.
Dalam panggilan balik onresult , ekstrak konten dan atur ke dalam textarea . Jadi ketika kita berbicara ke mikrofon, teks tersebut muncul di konten textarea .
Sumber daya terkait:
Bluetooth API memungkinkan kita mengakses perangkat berdaya rendah di ponsel perangkat yang dilengkapi Bluetooth dan menggunakannya untuk berbagi data dari halaman web ke perangkat lain.
API dasarnya adalah navigator.bluetooth.requestDevice . Memanggil ini akan menyebabkan browser meminta pengguna dengan pemilih perangkat, di mana pengguna dapat memilih perangkat atau membatalkan permintaan. navigator.bluetooth.requestDevice memerlukan objek wajib. Objek ini mendefinisikan filter yang mengembalikan perangkat Bluetooth yang cocok dengan filter tersebut.
Mari kita lihat contoh sederhana menggunakan API navigator.bluetooth.requestDevice untuk mengambil informasi perangkat dasar dari perangkat BLE:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="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="kesalahan" class="close"></div>
<div>
<div>Nama Perangkat: <span id="dname"></span></div>
<div>ID Perangkat: <span id="did"></span></div>
<div>Perangkat Terhubung: <span id="dconnected"></span></div>
</div>
<div>
<button onclick="bluetoothAction()">Dapatkan Perangkat BLE</button>
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
fungsi bluetoothAksi(){
if(navigator.bluetooth) {
navigator.bluetooth.requestDevice({
terimaSemuaPerangkat: benar
}).lalu(perangkat => {
dname.innerHTML = perangkat.nama
did.innerHTML = perangkat.id
dconnected.innerHTML = perangkat.terhubung
}).menangkap(salah => {
error.innerHTML = "Ya ampun!! Ada yang tidak beres."
error.classList.hapus("tutup")
})
} kalau tidak {
error.innerHTML = "Bluetooth tidak didukung."
error.classList.hapus("tutup")
}
}
</skrip> 
Informasi perangkat akan ditampilkan di sini. Mengklik tombol Dapatkan Perangkat BLE akan memanggil fungsi bluetoothAction :
function bluetoothAction(){
navigator.bluetooth.requestDevice({
terimaSemuaPerangkat: benar
}).lalu(perangkat => {
dname.innerHTML = perangkat.nama
did.innerHTML = perangkat.id
dconnected.innerHTML = perangkat.terhubung
}).menangkap(salah => {
console.error("Ya ampun!! Ada yang tidak beres.")
})
} Fungsi bluetoothAction memanggil API navigator.bluetooth.requestDevice dengan opsi acceptAllDevices：true , yang akan menyebabkannya memindai dan mencantumkan semua perangkat aktif Bluetooth terdekat. Ini mengembalikan promise , jadi putuskan untuk mendapatkan perangkat parameter dari fungsi panggilan balik, parameter perangkat ini akan menyimpan informasi perangkat Bluetooth yang terdaftar. Di sinilah kami menggunakan propertinya untuk menampilkan informasi pada perangkat.
Sumber terkait:
Vibration API dapat membuat perangkat kita bergetar, seperti A cara kita merespons pemberitahuan atau umpan balik fisik atas data atau informasi baru.
Metode untuk melakukan getaran adalah navigator.vibrate(pattern) . pattern adalah suatu bilangan tunggal atau serangkaian bilangan yang menggambarkan suatu pola getaran.
Ini akan menyebabkan perangkat berhenti bergetar setelah 200 milidetik:
navigator.vibrate(200) navigator.vibrate([200])
Ini akan menyebabkan perangkat bergetar selama 200 ms, berhenti selama 300 ms, dan terakhir bergetar selama 400 ms dan berhenti:
navigator.vibrate([200, 300, 400])
dapat dilewati 0, [], [ 0,0,0] untuk menghilangkan getaran.
Mari kita lihat contoh sederhana:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Demo-Getaran
</div>
<div class="web-api-card-body">
<div id="kesalahan" class="close"></div>
<div>
<input id="vibTime" type="number" placeholder="Waktu getar" />
</div>
<div>
<button onclick="vibrate()">Getar</button>
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
if(navigator.getar) {
fungsi getar() {
waktu konstan = vibTime.nilai
jika(waktu != "")
navigator.vibrate(waktu)
}
} kalau tidak {
error.innerHTML = "API getar tidak didukung di perangkat ini."
error.classList.hapus("tutup")
}
</script> Ada kotak input dan tombol di sini. Masukkan durasi getaran di kotak masukan dan tekan tombol. Perangkat kami akan bergetar sesuai waktu yang dimasukkan.
Sumber daya terkait:
API Saluran Siaran API Saluran Siaran memungkinkan penjelajahan berbeda dari asal yang sama Konteks mengkomunikasikan pesan atau data. Diantaranya, konteks penelusuran mengacu pada jendela, tab, iframe, pekerja, dll.
Kelas BroadcastChannel digunakan untuk membuat atau bergabung dengan saluran:
const politicChannel = new BroadcastChannel("politics") politics adalah nama saluran. Konteks apa pun yang menginisialisasi konstruktor BroadcastChannel menggunakan politics akan bergabung dengan saluran politics dikirim pada saluran tersebut dan dapat mengirim pesan ke saluran tersebut.
Jika ini adalah konstruktor BroadcastChannel pertama dengan politics , saluran tersebut akan dibuat. Anda dapat menggunakan BroadcastChannel.postMessage API untuk memposting pesan ke saluran. Gunakan API BroadcastChannel.onmessage untuk berlangganan pesan saluran.
Mari kita lihat aplikasi chatting sederhana:
<body>
<tajuk>
<h2>API Web<h2>
</tajuk>
<div kelas="web-api-cnt">
<div class="web-api-card">
<div class="web-api-card-head">
Saluran Siaran Demo
</div>
<div class="web-api-card-body">
<div class="page-info">Buka halaman ini di <i>tab</i>, <i>jendela</i>, atau <i>iframe</i> lain untuk ngobrol dengan mereka.</div>
<div id="kesalahan" class="close"></div>
<div id="displayMsg" style="ukuran font:19px; perataan teks: kiri;">
</div>
<div kelas = "Area Obrolan">
<input id="input" type="text" placeholder="Ketik pesan Anda" />
<button onclick="sendMsg()">Kirim Pesan ke Saluran</button>
</div>
</div>
</div>
</div>
</tubuh>
<skrip>
const l = konsol.log;
mencoba {
var politikChannel = Saluran Siaran baru("politik")
politikChannel.onmessage = onMessage
var userId = Tanggal.sekarang()
} tangkapan(e) {
error.innerHTML = "API BroadcastChannel tidak didukung di perangkat ini."
error.classList.hapus("tutup")
}
masukan.addEventListener("keydown", (e) => {
if(e.keyCode === 13 && e.target.value.trim().length > 0) {
kirim pesan()
}
})
fungsi pada Pesan(e) {
const {pesan,id}=e.data
const newHTML = "<div class='chat-msg'><span><i>"+id+"</i>: "+msg+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + HTML baru
displayMsg.scrollTop = displayMsg.scrollHeight
}
fungsi kirim pesan() {
politikChannel.postMessage({msg:input.value,id:userId})
const newHTML = "<div class='chat-msg'><span><i>Saya</i>: "+input.value+"</span></div>"
displayMsg.innerHTML = displayMsg.innerHTML + HTML baru
masukan.nilai = ""
displayMsg.scrollTop = displayMsg.scrollHeight
}
</script> Berikut adalah teks dan tombol sederhana. Masukkan pesan Anda dan tekan tombol untuk mengirimkannya. Perintah berikut ini menginisialisasi politicalChannel dan menetapkan pendengar acara onmessage di politicalChannel sehingga dapat menerima dan menampilkan pesan.
Mengklik tombol akan memanggil fungsi sendMsg . Ia mengirimkan pesan ke saluran politics melalui BroadcastChannel#postMessage API. Setiap tab, iframe, atau pekerja yang menginisialisasi skrip ini akan menerima pesan yang dikirim dari sini, sehingga halaman ini akan menerima pesan yang dikirim dari konteks lain. Sumber daya terkait:
Clipboard Operasi clipboard seperti salin, potong, dan tempel adalah beberapa aplikasi salah satu fitur paling umum di . Clipboard API memungkinkan pengguna web mengakses clipboard sistem dan melakukan operasi clipboard dasar.
Sebelumnya, dimungkinkan untuk menggunakan document.execCommand untuk berinteraksi dengan clipboard sistem. API papan klip asinkron modern menyediakan akses langsung untuk membaca dan menulis konten papan klip.
Baca konten dari clipboard:
navigator.clipboard.readText().then(clipText =>
dokumen.getElementById("kotak keluar").innerText = clipText
); Menulis konten ke clipboard:
function updateClipboard(newClip) {
navigator.clipboard.writeText(newClip).lalu(fungsi() {
/* papan klip berhasil disetel */
}, fungsi() {
/* penulisan clipboard gagal */
});
} Sumber daya terkait:
Share API dapat membantu kita mengimplementasikan fungsi berbagi pada aplikasi web. Ini memberikan nuansa berbagi yang bersifat mobile-native. Itu memungkinkan untuk berbagi teks, file, dan tautan ke aplikasi lain di perangkat Anda.
Web Share API dapat diakses melalui metode navigator.share :
if (navigator.share) {
navigator.berbagi({
judul: 'Baidu',
teks: 'Baidu',
url: '<https://www.baidu.com/>',
})
.then(() => console.log('Berbagi berhasil'))
.catch((error) => console.log('Berbagi gagal', error));
} Kode di atas mengimplementasikan berbagi teks menggunakan JavaScript asli. Perhatikan bahwa kita hanya dapat memanggil operasi ini menggunakan event onclick :
function Share({ label, text, title }) {
const shareDetails = { judul, teks };
const handleSharing = async () => {
if (navigator.berbagi) {
mencoba {
menunggu navigator.share(shareDetails).then(() => console.log("Terkirim"));
} tangkapan (kesalahan) {
console.log(`Ups! Saya tidak dapat membagikannya kepada dunia karena: ${error}`);
}
} kalau tidak {
// kode cadangan
konsol.log(
"Berbagi web saat ini tidak didukung di browser ini. Harap berikan panggilan balik"
);
}
};
kembali (
<tombol onClick={handleSharing}>
<span>{label</span>
</tombol>
);
} Sumber daya terkait: