如何使用HTML5振動API

移動設備的普及使得越來越多的用戶通過手機和平板電腦訪問網頁。截至2013年12月，每五次網頁訪問中就有一次來自移動設備。如果您的網站或應用程序能夠適應移動設備，這個比例可能會更高。多設備開發麵臨挑戰，但也帶來了一些台式電腦無法實現的可能性。例如，振動機制就是一個簡單的觸覺反饋設備，可以提醒您新的消息或電話。在嘈雜的環境中或安靜的環境中（聲音會造成乾擾），它尤其有用。如果您的應用程序可以使用振動功能，豈不是很棒？

• 步行路線指示：左轉一次振動，右轉兩次振動。
• 當事件發生或您靠近某人時，手機以特定方式振動。
• 您可以使用基於振動的摩爾斯電碼發送秘密消息！
• 遊戲可以通過在您碰撞或被導彈擊中時振動來增強遊戲體驗。

HTML5 振動 API 允許您做到這一點！

是否需要振動？

僅僅因為我們可以讓手機振動，並不意味著我們應該這樣做。振動會嚴重消耗電池電量，因此如果電量不足或當前標籤頁中未運行遊戲，最好將其禁用。根據您的應用程序，最好提供用戶選項，以便他們可以啟用、禁用或配置振動條件。

瀏覽器支持和檢測

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

if ("vibrate" in navigator) {
    // 支持振动 API
}

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

// 启用振动支持
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
    // 支持振动 API
}

振動基礎

可以通過將毫秒數傳遞給 navigator.vibrate 來設置基本振動：

// 振动一秒钟
navigator.vibrate(1000);

或者，您可以傳遞一個包含以毫秒為單位指定的振動和延遲參數的數組。例如，要振動 500 毫秒，等待 300 毫秒，然後再次振動 100 毫秒：

// 振动一秒钟
navigator.vibrate([500, 300, 100]);

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

振動演示

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

HTML5 振動 API 常見問題解答

什麼是 HTML5 振動 API？

HTML5 振動 API 是一種強大的工具，允許開發人員以編程方式訪問設備上（如果存在）的振動硬件。這可以用於根據各種事件（例如接收通知或按下按鈕）向用戶提供觸覺反饋。需要注意的是，API 並不能保證振動會發生，因為最終決定權留給操作系統和用戶的設置。

如何在我的 Web 應用程序中使用振動 API？

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

我可以在所有設備上使用振動 API 嗎？

振動 API 主要用於具有內置振動硬件的移動設備。但是，可以在任何設備上調用 API。如果設備不支持振動，則對 navigator.vibrate() 的調用將被簡單地忽略。

如何檢查設備是否支持振動 API？

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

我可以在振動結束前停止振動嗎？

是的，您可以通過使用參數 0 或空數組調用 navigator.vibrate() 方法來在振動結束前停止振動。例如，navigator.vibrate(0) 或 navigator.vibrate([]).

所有瀏覽器都支持振動 API 嗎？

大多數現代瀏覽器（包括 Chrome、Firefox 和 Opera）都支持振動 API。但是，Internet Explorer 不支持它，Safari 的支持有限。

我可以在工作線程上下文中使用振動 API 嗎？

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

使用振動 API 是否有任何限制？

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

我可以指定振動的強度嗎？

不可以，振動 API 不允許您指定振動的強度。強度由設備的硬件和操作系統控制。

我可以使用振動 API 創建複雜的振動模式嗎？

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

以上是如何使用HTML5振動API的詳細內容。更多資訊請關注PHP中文網其他相關文章！