移動(dòng)設(shè)備的普及使得越來越多的用戶通過手機(jī)和平板電腦訪問網(wǎng)頁。截至2013年12月，每五次網(wǎng)頁訪問中就有一次來自移動(dòng)設(shè)備。如果您的網(wǎng)站或應(yīng)用程序能夠適應(yīng)移動(dòng)設(shè)備，這個(gè)比例可能會(huì)更高。多設(shè)備開發(fā)面臨挑戰(zhàn)，但也帶來了一些臺(tái)式電腦無法實(shí)現(xiàn)的可能性。例如，振動(dòng)機(jī)制就是一個(gè)簡(jiǎn)單的觸覺反饋設(shè)備，可以提醒您新的消息或電話。在嘈雜的環(huán)境中或安靜的環(huán)境中（聲音會(huì)造成干擾），它尤其有用。如果您的應(yīng)用程序可以使用振動(dòng)功能，豈不是很棒？

• 步行路線指示：左轉(zhuǎn)一次振動(dòng)，右轉(zhuǎn)兩次振動(dòng)。
• 當(dāng)事件發(fā)生或您靠近某人時(shí)，手機(jī)以特定方式振動(dòng)。
• 您可以使用基于振動(dòng)的摩爾斯電碼發(fā)送秘密消息！
• 游戲可以通過在您碰撞或被導(dǎo)彈擊中時(shí)振動(dòng)來增強(qiáng)游戲體驗(yàn)。

HTML5 振動(dòng) API 允許您做到這一點(diǎn)！

是否需要振動(dòng)？

僅僅因?yàn)槲覀兛梢宰屖謾C(jī)振動(dòng)，并不意味著我們應(yīng)該這樣做。振動(dòng)會(huì)嚴(yán)重消耗電池電量，因此如果電量不足或當(dāng)前標(biāo)簽頁中未運(yùn)行游戲，最好將其禁用。根據(jù)您的應(yīng)用程序，最好提供用戶選項(xiàng)，以便他們可以啟用、禁用或配置振動(dòng)條件。

瀏覽器支持和檢測(cè)

該 API 相對(duì)較新，目前僅限于最新版本的 Firefox 和 Chrome 支持。較早的版本分別需要 moz 和 webkit 前綴。您還應(yīng)該使用具有振動(dòng)機(jī)制的設(shè)備——API 可能會(huì)在您的瀏覽器中可用，但如果沒有振動(dòng)機(jī)制，您將無法知道它是否有效！使用以下檢查來檢測(cè)振動(dòng)支持：

if ("vibrate" in navigator) {
    // 支持振動(dòng) API
}

要檢查和使用帶前綴的版本，您可以使用以下代碼：

// 啟用振動(dòng)支持
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
    // 支持振動(dòng) API
}

振動(dòng)基礎(chǔ)

可以通過將毫秒數(shù)傳遞給 navigator.vibrate 來設(shè)置基本振動(dòng)：

// 振動(dòng)一秒鐘
navigator.vibrate(1000);

或者，您可以傳遞一個(gè)包含以毫秒為單位指定的振動(dòng)和延遲參數(shù)的數(shù)組。例如，要振動(dòng) 500 毫秒，等待 300 毫秒，然后再次振動(dòng) 100 毫秒：

// 振動(dòng)一秒鐘
navigator.vibrate([500, 300, 100]);

偶數(shù)索引的數(shù)組項(xiàng)定義振動(dòng)時(shí)間（數(shù)組從零開始，因此第一項(xiàng)和第三項(xiàng)分別是 0 和 2）。奇數(shù)索引的數(shù)組項(xiàng)定義延遲時(shí)間。振動(dòng)是非阻塞的；當(dāng)設(shè)備正在振動(dòng)時(shí)，您的 JavaScript 代碼將繼續(xù)運(yùn)行。要停止振動(dòng)，您可以將零傳遞給 navigator.vibrate。此概念在游戲中可能很有用。例如，當(dāng)用戶撞壞汽車時(shí)，您設(shè)置 navigator.vibrate(10000)。但是，如果碰撞效果在 10 秒內(nèi)結(jié)束，則設(shè)置 navigator.vibrate(0) 以結(jié)束振動(dòng)。

振動(dòng)演示

要在您的設(shè)備上測(cè)試 API……查看振動(dòng) API 演示……查看所有 HTML、CSS 和 JavaScript 的源代碼。表單參數(shù)構(gòu)建一個(gè)數(shù)組，在單擊“開始”時(shí)將其傳遞給 navigator.vibrate。單擊“停止”按鈕時(shí)，將執(zhí)行 navigator.vibrate(0);。盡情使用振動(dòng) API，如果您有任何有趣的用途，請(qǐng)告訴我。

HTML5 振動(dòng) API 常見問題解答

什么是 HTML5 振動(dòng) API？

HTML5 振動(dòng) API 是一種強(qiáng)大的工具，允許開發(fā)人員以編程方式訪問設(shè)備上（如果存在）的振動(dòng)硬件。這可以用于根據(jù)各種事件（例如接收通知或按下按鈕）向用戶提供觸覺反饋。需要注意的是，API 并不能保證振動(dòng)會(huì)發(fā)生，因?yàn)樽罱K決定權(quán)留給操作系統(tǒng)和用戶的設(shè)置。

如何在我的 Web 應(yīng)用程序中使用振動(dòng) API？

要使用振動(dòng) API，您需要調(diào)用 navigator.vibrate() 方法。此方法接受單個(gè)整數(shù)或整數(shù)數(shù)組。單個(gè)整數(shù)表示振動(dòng)持續(xù)的毫秒數(shù)。整數(shù)數(shù)組表示振動(dòng)和暫停的模式。例如，navigator.vibrate(200) 將使設(shè)備振動(dòng) 200 毫秒，而 navigator.vibrate([200, 100, 200]) 將使設(shè)備振動(dòng) 200 毫秒，暫停 100 毫秒，然后再次振動(dòng) 200 毫秒。

我可以在所有設(shè)備上使用振動(dòng) API 嗎？

振動(dòng) API 主要用于具有內(nèi)置振動(dòng)硬件的移動(dòng)設(shè)備。但是，可以在任何設(shè)備上調(diào)用 API。如果設(shè)備不支持振動(dòng)，則對(duì) navigator.vibrate() 的調(diào)用將被簡(jiǎn)單地忽略。

如何檢查設(shè)備是否支持振動(dòng) API？

您可以使用 navigator 對(duì)象的 vibrate 屬性來檢查設(shè)備是否支持振動(dòng) API。如果該屬性存在，則該設(shè)備支持該 API。以下是您可以執(zhí)行此操作的方法：if ("vibrate" in navigator) { / 設(shè)備支持振動(dòng) / }。

我可以在振動(dòng)結(jié)束前停止振動(dòng)嗎？

是的，您可以通過使用參數(shù) 0 或空數(shù)組調(diào)用 navigator.vibrate() 方法來在振動(dòng)結(jié)束前停止振動(dòng)。例如，navigator.vibrate(0) 或 navigator.vibrate([]).

所有瀏覽器都支持振動(dòng) API 嗎？

大多數(shù)現(xiàn)代瀏覽器（包括 Chrome、Firefox 和 Opera）都支持振動(dòng) API。但是，Internet Explorer 不支持它，Safari 的支持有限。

我可以在工作線程上下文中使用振動(dòng) API 嗎？

不可以，振動(dòng) API 在工作線程上下文中不可用。它只能在主瀏覽器上下文中使用。

使用振動(dòng) API 是否有任何限制？

是的，使用振動(dòng) API 有一些限制。例如，在某些瀏覽器中，API 只能響應(yīng)用戶操作（例如單擊或觸摸）來使用，以防止濫用或煩人的使用。

我可以指定振動(dòng)的強(qiáng)度嗎？

不可以，振動(dòng) API 不允許您指定振動(dòng)的強(qiáng)度。強(qiáng)度由設(shè)備的硬件和操作系統(tǒng)控制。

我可以使用振動(dòng) API 創(chuàng)建復(fù)雜的振動(dòng)模式嗎？

是的，您可以通過將整數(shù)數(shù)組傳遞給 navigator.vibrate() 方法來使用振動(dòng) API 創(chuàng)建復(fù)雜的振動(dòng)模式。數(shù)組中的每個(gè)整數(shù)都表示振動(dòng)或暫停的持續(xù)時(shí)間。例如，navigator.vibrate([200, 100, 200, 100, 200]) 將創(chuàng)建一個(gè)由三個(gè)振動(dòng)組成的模式，每個(gè)振動(dòng)持續(xù) 200 毫秒，由兩個(gè)暫停隔開，每個(gè)暫停持續(xù) 100 毫秒。

以上是如何使用HTML5振動(dòng)API的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！