Android屏幕关闭时HTML5页面按钮的无视觉操作方案咨询

需求说明 #

• 支持无需视觉操作或息屏省电的交互方式，仅通过Android硬件按钮、耳机按钮或息屏可用的触摸屏操作
• 不依赖加速度计、指南针等传感器
• 适配PC及Android 6+系统，可离线运行，仅使用纯HTML5、原生JS实现
• 排除外接键盘、语音转文字、特殊浏览器等方案，不涉及语音相关功能

实现代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无视觉交互按钮</title>
    <style>
        body { margin: 0; }
        .btn_top { width: 100%; height: 50vh; }
        .btn_l { width: 48%; height: 50vh; }
        .btn_r { width: 48%; height: 50vh; position: absolute; right: 0px; }
        /* 无视觉场景下可隐藏按钮 */
        .hidden { display: none; }
    </style>
</head>
<body>
    <button class='btn_top' onclick="triggerAction('up')">up</button>
    <button class='btn_l' onclick="triggerAction('accept')">accept</button>
    <button class='btn_r' onclick="triggerAction('next')">next</button>

    <script>
        // 内嵌提示音（base64编码，支持离线使用）
        const beepSound = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmGgU7k9n1unEiBC13yO/eizEIHWq+8+OWT');
        
        // 播放提示音
        function playBeep() {
            beepSound.currentTime = 0;
            beepSound.play().catch(err => console.log('提示音播放失败:', err));
        }

        // 触发对应操作
        function triggerAction(action) {
            playBeep();
            console.log(action);
            // 可在此扩展具体业务逻辑
        }

        // 监听硬件/耳机按键
        document.addEventListener('keydown', (e) => {
            switch(e.keyCode) {
                case 27: // Android返回键 → 对应up操作
                    triggerAction('up');
                    e.preventDefault();
                    break;
                case 175: // 音量加键 → 对应accept操作
                    triggerAction('accept');
                    e.preventDefault();
                    break;
                case 174: // 音量减键 → 对应next操作
                    triggerAction('next');
                    e.preventDefault();
                    break;
                case 85: // 耳机播放/暂停键（部分设备适用）→ 对应accept操作
                    triggerAction('accept');
                    e.preventDefault();
                    break;
            }
        });

        // 息屏盲触支持：基于屏幕区域划分触发对应操作
        document.body.addEventListener('touchstart', (e) => {
            const { clientY: touchY, clientX: touchX } = e.touches[0];
            const { innerHeight: screenHeight, innerWidth: screenWidth } = window;

            if (touchY < screenHeight / 2) {
                triggerAction('up');
            } else if (touchX < screenWidth / 2) {
                triggerAction('accept');
            } else {
                triggerAction('next');
            }
            e.preventDefault();
        }, { passive: false });

        // 可选：无视觉场景下隐藏按钮
        // document.querySelectorAll('button').forEach(btn => btn.classList.add('hidden'));
    </script>
</body>
</html>

关键实现说明 #

• 提示音：采用base64内嵌WAV音频，无需外部资源，支持离线播放
• 硬件/耳机按键监听：通过keydown事件捕获Android返回键、音量加减键及耳机控制键，映射到对应按钮操作
• 盲触交互：基于屏幕区域划分，触摸上半区触发up，下半左区触发accept，下半右区触发next，适配息屏时的触摸操作
• 兼容性：纯原生JS实现，支持PC及Android 6+系统，可离线运行

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