如何在WebGL构建中实现可调节时长与强度的手机振动？

核心原理 #

WebGL构建的网页运行在手机浏览器中，直接调用浏览器Vibration API即可实现振动，无需付费资产。该API支持单次振动、重复振动，部分设备的浏览器还支持调节振动强度（兼容性有限）。

实现步骤 #

1. 创建WebGL JS插件文件 #

在Unity项目的Assets/Plugins/WebGL目录下（无此目录则新建）创建Vibration.jslib文件，内容如下：

mergeInto(LibraryManager.library, {
    // 基础振动：传入时长（毫秒）
    Vibrate: function(duration) {
        if (navigator.vibrate) {
            navigator.vibrate(duration);
        }
    },
    // 自定义振动模式：数组元素为振动/暂停时长（毫秒）
    VibratePattern: function(patternPtr) {
        if (navigator.vibrate) {
            const pattern = UTF8ToString(patternPtr);
            const patternArray = JSON.parse(pattern);
            navigator.vibrate(patternArray);
        }
    },
    // 停止振动
    StopVibration: function() {
        if (navigator.vibrate) {
            navigator.vibrate(0);
        }
    },
    // 检查设备是否支持振动
    IsVibrationSupported: function() {
        return navigator.vibrate ? 1 : 0;
    }
});

注：部分安卓浏览器支持强度调节，可将Vibrate函数的参数改为{ duration: 1000, intensity: 0.7 }对象，但该特性兼容性较差，优先使用基础时长振动可保证更广泛的适配。

2. 编写C#调用脚本 #

创建VibrationManager.cs脚本，封装JS调用逻辑：

using UnityEngine;
using System.Runtime.InteropServices;

public class VibrationManager : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Vibrate(int duration);

    [DllImport("__Internal")]
    private static extern void VibratePattern(string pattern);

    [DllImport("__Internal")]
    private static extern void StopVibration();

    [DllImport("__Internal")]
    private static extern int IsVibrationSupported();

    // 基础振动接口
    public static void StartVibration(int durationMs)
    {
        #if UNITY_WEBGL && !UNITY_EDITOR
        if (IsVibrationSupported() == 1)
        {
            Vibrate(durationMs);
        }
        #endif
    }

    // 自定义振动节奏接口（例：[200,100,200] 代表振动200ms→暂停100ms→振动200ms）
    public static void StartVibrationPattern(int[] pattern)
    {
        #if UNITY_WEBGL && !UNITY_EDITOR
        if (IsVibrationSupported() == 1)
        {
            string jsonPattern = JsonUtility.ToJson(pattern);
            VibratePattern(jsonPattern);
        }
        #endif
    }

    // 停止振动接口
    public static void EndVibration()
    {
        #if UNITY_WEBGL && !UNITY_EDITOR
        StopVibration();
        #endif
    }

    // 检查振动支持状态
    public static bool CheckVibrationSupport()
    {
        #if UNITY_WEBGL && !UNITY_EDITOR
        return IsVibrationSupported() == 1;
        #else
        return false;
        #endif
    }
}

3. 调用示例 #

在需要触发振动的逻辑中直接调用：

// 振动500毫秒
VibrationManager.StartVibration(500);

// 自定义振动节奏
VibrationManager.StartVibrationPattern(new int[] {300, 200, 500});

// 停止振动
VibrationManager.EndVibration();

4. 关键注意事项 #

• 必须在HTTPS环境下测试，多数现代浏览器禁止HTTP页面调用振动API。
• iOS Safari仅允许用户主动交互（如点击按钮）触发振动，且不支持自定义模式与强度调节。
• Unity编辑器中无法测试振动功能，需将项目构建为WebGL后，用手机浏览器打开测试。

内容的提问来源于stack exchange，提问作者anxl228